CODEWITHSUNDEEP
htmlcss
pikkvile
pikkvile

Reputation: 2521

Why parent and child borders do not overlap?

I tried to create a simple layout using plain html and css:

<div class="container">
    <div class="left">
        <div class="top bordered"></div>
        <div class="bott bordered"></div>
    </div>
    <div class="right bordered">
    </div>
</div>

.container {height: 500px; background-color: #eeeeee;}
.left {float: left; width: 49%; height: 80%; position: relative;}
.right {float: right; width: 50%; height: 80%;}
.bordered {border: 1px solid #aaaaaa; border-radius: 5px;}
.top {height: 20%; width: 100%; position: absolute; bottom: 0;}
.bott {height: 30%; width: 100%;}

Please take a look http://jsfiddle.net/SLfHf/. I want two bottom borders (at left and right) to be displayed at the same height. But as you can see left one is a bit higher. Investigating this I found out that children borders do not overlap parent borders, even if there're no any paddings and margins. So the question is: why?

Upvotes: 1

Views: 2025

Answers (2)

Ennui
Ennui

Reputation: 10190

That is just how the default CSS box model (called content-box) works. A box's size is equal to its specified width/height dimensions + padding + border.

box-sizing: border-box is a CSS property that changes the box model so that padding and border are inside the specified dimensions rather than added to them (e.g. specified width/height - padding - border). Using this has become increasingly popular in the last few years as many consider it an easier box model to work with, and it arguably makes responsive design a bit easier. All you need to do is add this to your stylesheet:

* { box-sizing: border-box; }

Borders never collapse with adjacent borders regardless of box model or context. You need to set borders individually (i.e. border-top: 1px solid #000) to accomplish that behavior.

The only time adjacent boxes have any kind of collapse property outside of tables is in some specific situations adjacent margins will collapse: more info here.

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106038

If you want to include borders within hight/weidth of a boxe, you should use :

box-sizing:border-box;

http://www.w3.org/TR/css3-ui/#box-sizing0 (prefix might be needed :) )

Upvotes: 4

Related Questions