html - Why parent and child borders do not overlap? -

i tried create simple layout using plain html , 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 http://jsfiddle.net/slfhf/. want 2 bottom borders (at left , right) displayed @ same height. can see left 1 bit higher. investigating found out children borders not overlap parent borders, if there're no paddings , margins. question is: why?

that how default css box model (called content-box) works. box's size equal specified width/height dimensions + padding + border.

box-sizing: border-box css property changes box model padding , border inside specified dimensions rather added them (e.g. specified width/height - padding - border). using has become increasingly popular in last few years many consider easier box model work with, , arguably makes responsive design bit easier. need add stylesheet:

* { box-sizing: border-box; } 

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

the time adjacent boxes have kind of collapse property outside of tables in specific situations adjacent margins collapse: more info here.