ajpocus ajpocus - 1 year ago 86
CSS Question

box-sizing: border-box not working with Cleanslate.css

I'm using Cleanslate to reset all the CSS attributes on my widget container and its children, and I'm trying to add

box-sizing: border-box
to all of my elements, but it's not behaving as expected.

The anchor element (set to
display: inline-block
) with 100% width doesn't subtract its padding/margin from the width. I have a Codepen that shows the behavior I'm seeing here: http://codepen.io/anon/pen/dXarGy.

Could someone please help me figure out what's going on here? I'm not all that great with CSS. Thanks in advance!

Answer Source

boder-box isn't supposed to subtract margin.


The width and height properties (and min/max properties) includes content, padding and border, but not the margin

So it seems like your example is working as expected as you are setting a margin:

margin: 12px 20px !important;

that is added to your width: 100%;

Also see this article about box-sizing.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download