Box-Model Properties
display: block |
display: inline |
display: inline-block |
|
|---|---|---|---|
| default at |
<h1> and <p>
|
<span> and <em>
|
|
| width | width as the container | width as the inline Element | |
| width & height properties | are respected. | width and height properties will not apply | |
| Padding, margin and border | will cause other elements to be pushed away from the box | will apply. Vertical will not cause other inline boxes to move away from the box/ Horizontal will cause other inline boxes to move away from the box | causes the padding to be respected by other elements |
| centering stuff | block box with {margin: 20px auto; /* Vertical Horizontal */}
|
inline box with {text-align: center}
|
Tips
-> more on centering
get rid of the default white space in some browsers from margin/padding added by your browser.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Top comments (0)