Margin, border, padding and size don't add up as expected

Question

I have a simple scenario of basic HTML and CSS for which the bounding box measurements don't add up width-wise.

The expected result is obtained by setting the column width to 324 px although 320 px seems to be the proper fit. In the following JSFiddle there's a single property value to alter to see the expected result v.s. the desired width.

Expected result (wrong property value)

div.container div.column {
    width: 324px;
}

Bad result (desired property value)

div.container div.column {
    width: 320px;
}

Why I think 320 px should be the containing width of my two buttons:

320 px (column) = 155 px (button) + 10px (margin) + 155px (button)

I'm sure the issue is on my side of comprehension, can anyone explain why this is going on?

You might want to also read up on this: http://reference.sitepoint.com/css/boxmodel — Tieson T., Feb 27 '14 at 22:20

score 5 · Accepted Answer · answered Feb 27 '14 at 22:19

<button>s by default are inline-block elements. This means that the space (literally space) affects it's spacing.

You can set the button to display block and float to the left to get similar results:

div.container button {
    width: 155px;
    height: 155px;
    margin-right: 10px;
    display:block; float:left;
}

also you'll need to clear your float in your row:

div.container div.row:after {
    clear:both;
    display:table;
    content:'';
}

http://jsfiddle.net/4mWqL/2/

score 1 · Answer 2 · edited May 23 '17 at 11:49

Because the two <button> tags are on separate lines it tries to add some kind of white-spacing in between the two items. If you put them on one line it works.

http://jsfiddle.net/4mWqL/1/

<div class="row">
   <button></button><button></button>
</div>

From Why does the browser renders a newline as space?

Browsers condense multiple whitespace characters (including newlines) to a single space when rendering. The only exception is within elements or those that have the CSS property white-space: pre set. (Or in XHTML, the xml:space="preserve" attribute.)

Margin, border, padding and size don't add up as expected

2 Answers2