CODEWITHSUNDEEP
css
danShumway
danShumway

Reputation: 450

box-sizing and height expected behavior

I've been running into an issue lately where I seem to get very inconsistent behavior with the box-sizing:border-box tag in css. For instance, the block of code below seems to completely ignore the tags. 

<!DOCTYPE html>
<html>
<head>
<style>
.one {
margin-bottom:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; 
margin-left:10px;
overflow:hidden; 
background-color:green; 
width:40px; 
height:40px;
}
.two {
height:30px; 
width:30px; 
background-color:black; 
}
</style>
</head>
<body>
<div class = 'two'></div>
<div class = 'one'></div>
<div class = 'two'></div>
</body>
</html>

I have to assume this is expected behavior, but I haven't seen any articles expressly talking about instances where box-sizing wouldn't work, and through experimentation I've been unable to find what css properties seem to affect it, other than that pixel based widths/heights seem to play poorly with it. Would anyone be willing to clarify whether this is a property that only works with percentages or only horizontally?

Upvotes: 1

Views: 1359

Answers (1)

Jason
Jason

Reputation: 3360

I'm not sure you understand what box-sizing:border-box is supposed to do. What about that snippet ignores tags? Please explain the behavior that you're expecting and how this differs.

As for the property itself, I'm assuming since you had done some looking around that you're familiar with the box-model.

For example, adding padding to an element using the 'normal' box model will add the padding to the outside of the element, however, using the same padding with box-sizing:border-box will add the padding to the inside of the element, which will preserve your original size.

This can be illustrated in the following jsFiddle.

<style>
.one {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 width:50px;
 height:50px;
 padding:10px;
 background-color:#3e3e3e;
}

.two {
 width:50px;
 height:50px;
 padding:10px;
 background-color:red;
}


<div class = "one">one1</div><div class = "one">one2</div><div class = "one">one3</div>
<div class = "two">two1</div><div class = "two">two2</div><div class = "two">two3</div>

This situation creates the need to make sure that your math is correct or risk breaking your styling when not using the border-box property. For example, if you have <div>s that will each span a third of your page, you might set it up like this:

<style>
.one {
    width:33%;
    background-color:#3e3e3e;
    float:left;
}
</style>

<div class = "one">one1</div>
<div class = "one">one2</div>
<div class = "one">one3</div>

http://jsfiddle.net/b4LNp/

This is fine, but adding padding to it without border-box will cause the total size of the divs to equal more than 33% (33% width + 1em padding in this instance). This will ruin the columns that you created, as they're now too wide to fit alongside each other.

<style>
.one {
    width:33%;
    background-color:#3e3e3e;
    float:left;
    padding:1em;
}
</style>

<div class = "one">one1</div>
<div class = "one">one2</div>
<div class = "one">one3</div>

http://jsfiddle.net/u4w5B/

Using the border-box will instead put the padding on the inside of the element, keeping each at it's 33% and ensuring that no matter how you space the elements, they will stay at the width you originally told it to be. This eliminates the need for a lot of extra, unnecessary math.

<style>
.one {
    width:33%;
    background-color:#3e3e3e;
    float:left;
    padding:1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
</style>

<div class = "one">one1</div>
<div class = "one">one2</div>
<div class = "one">one3</div>

http://jsfiddle.net/u4w5B/1/

For more information, check out the following links:

w3 box-model explanation

Paul Irish's suggestion for *{box-sizing:border-box}

CSS Tricks box-sizing

Hong Kiat box-sizing in CSS3

Hope that helps!

Upvotes: 1

Related Questions