CODEWITHSUNDEEP
cssinput
Connor Cushion Mulhall
Connor Cushion Mulhall

Reputation: 1041

Input with extra width

I have created 3 input boxs in a div and the input boxes have been styled to have 269px width but displays with an extra 2px when i view it in a browser how do i stop it from doing this. I have set it with a margin of 5px on the right but have set it as 0 on the third one.

input {
    text-indent: 5px;
    height: 45px;
    color: #ffffff;
    width: 269px;
    margin-right: 5px;
    background-color: #0A4E6E;
    border: none;
    font-family: Helvetica Neue;
    font-size: 22px;
    display: block;
    float: left;
}

Upvotes: 2

Views: 646

Answers (1)

Matthew Darnell
Matthew Darnell

Reputation: 4588

It's most likely the border causing issues. Try using box-sizing:border-box; to make them more consistent across browsers.

input[type=text]{ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Upvotes: 4

Related Questions