CSS - CSS Box Model
CSS Box Model
The CSS Box Model shows how the margin, border, padding and content effects a css box.
Most commonly this is used as a div, which is probably one of the most common html elements.
The CSS Box Model
I have copied the div below and added labels so you can see how each of the items is effected.
- border:50px solid #777;
- padding:50px;
- margin:50px;
For this example i also set the width and height of the box.
HTML
<div class='box-model'>content</div>CSS
.box-model {
background:#999;
border:50px solid #777;
height:400px;
width:400px;
padding:50px;
margin:50px;
}Result
content