Why does 150 + 150 not equal 300 in browsers?

StackOverflow https://stackoverflow.com/questions/413653

  •  03-07-2019
  •  | 
  •  

Question

I have the following HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <style>
    .box {
        border: solid black 1px;
        padding: 0px;
        margin: 0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
    </form>
</body>
</html>

When rendered the 2nd row of textboxes appear to be cumulatively longer than the 1 on the first row. This despite explicit setting of widths via the style attribute

Why does this happen and can I avoid it?

Note: This appears to work the same in both FF3 and IE7

Was it helpful?

Solution

jhunter is correct, and I would add that you need Firebug for FireFox (it's free). You could have figured this out yourself quickly with that installed. Inspect the element you are interested in and look at the "layout" tab.

OTHER TIPS

There is a border on a textbox that isn't included in the width.

Indeed, the width of your boxes are +2 as a border on both the left and the right (which are 1px) means there's 2 extra pixels per box. So in total you're +6.

I'd suggest reading CSS Mastery, it explains a lot of the differences with the different browser box models and how they affect layout and width's in different browsers.

CSS Mastery

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top