css-Box Model

<! DOCTYPE html>
css3-Box Model

Box Model Properties :
Width widths
Height altitude
margin outer margin
Border border
padding inner margin
test{width:200px; height:100px; margin:20px; padding:15px; border:5px solid #f00;}

Standard mode, HTML header with document type declaration: <! DOCTYPE html>
Element actual width =width + padding-left + padding-right + border-left-width + border-right-width
element actual height =heigth + padding-top +padding-bottom + border-top-width + border-bottom-width
Promiscuous (weird) mode: Document type declaration is not or incorrect, box model parsing is different, error prone

block-level element box model , line wrap, 5 properties complete
Inline element Box model , do not wrap, no width, high attributes, only left and right margin, border, padding, not up and down.

<style>
div,span{
Background: #f00;

width:200px; /* Width */
height:100px; /* Height */
margin:50px; /* Outer margin */
padding:50px; /* Inner margin */
border:20px solid #f0f; /* Border */
}

/* Four sides set separately */
div{
margin-top:50px;/* Upper margin */
margin-right:100px;/* Right margin */
margin-bottom:150px;/* Lower margin */
margin-left:200px;/* Left margin */

padding-top:50px;/* on padding */
padding-right:100px;/* Right padding */
padding-bottom:150px; /* Lower padding */
padding-left:200px;/* Left padding */

border-top:50px solid #0f0;/* Top Border */
border-right:100px solid #00f ; /* Right box */
border-bottom:150px solid #ff0;/* Bottom Border */
border-left:200px solid #0ff;/* Left box */

/*margin padding Border Shorthand */
margin:5px 10px 20px 150px; /* upper Right lower left */
margin:50px 100px; /* up or down *
margin:50px; /* Four * *
}
</style>
AAAA aaa aaaa aaaaa aaaaaaa aaaaaa AAAA AAA
AAAA aaa aaaa aaaaa aaaaaaa aaaaaa AAAA AAA
<div>dddddd</div>
AAAA aaaa aaaaa aaa aaaaa aaaaaa aaaaaa AAAA
AAAA aaaa aaaaa aaa aaaaa aaaaaa aaaaaa AAAA
<div>dddddd2</div>
AAAA aaaaa aaaaaaa AAA triple AAA AAA AAA AAA AAA AA
AAAA aaaaa aaaaaaa AAA triple AAA AAA AAA AAA AAA AA
<span>sssssssss</span>
AAAA AA AA
<span>sssssssss2</span>
AAAAA aaaaaa aaaaaa aaaaaa aaaaa aaaaa AAAA
AAAAA aaaaaa aaaaaa aaaaaa aaaaa aaaaa AAAA

<br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br>

css-Box Model