CSS Box Model
Top
+----------------------------------------------+
| margin |
| +--------------------------------------+ |
| | border | |
| | +------------------------------+ | |
| | | padding | | |
| | | +----------------------+ | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
Left | | | | content | | | | Right
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | +----------------------+ | | |
| | | | | |
| | +------------------------------+ | |
| | | |
| +--------------------------------------+ |
| |
+----------------------------------------------+
Bottom
Usage
margin T R B L
margin T (R+L) B
margin (T+B (L+R)
margin (T+R+B+L)
Playground for box model
https://codepen.io/Ampix0/full/oWXLeR/
Video on YouTube
https://www.youtube.com/watch?v=9r2dYgpxCd4
note:
Margins are collapsible: the highest margin of the 2 boxes is used (vertical)
Margins inherit the color of the outer element.
Code pen: tool to play with HTML/CSS/JavaScript
Example Margin / Border / Padding clipping:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip
HTML:
<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>
CSS:
div {
width : 60px;
height : 60px;
border : 20px solid rgba(0, 0, 0, 0.5);
padding: 20px;
margin : 20px 0;
background-size : 140px;
background-position: center;
background-image : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
background-color : gold;
}
.default { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
etc.:
Created with the Personal Edition of HelpNDoc: Easily create EBooks