Add padding to HTML text input field

前端 未结 6 921
悲哀的现实
悲哀的现实 2021-02-01 12:18

I want to add some space to the right of an so that there\'s some empty space on the right of the field.

So, instead of

6条回答
  •  独厮守ぢ
    2021-02-01 12:49

    You can provide padding to an input like this:

    HTML:

    
    

    CSS:

    input {
        width: 250px;
        padding: 5px;
    }
    

    however I would also add:

    input {
        width: 250px;
        padding: 5px;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }
    

    Box sizing makes the input width stay at 250px rather than increase to 260px due to the padding.

    For reference.

提交回复
热议问题