DEV Community

Cover image for TIL - CSS Box Model
Anne Quinkenstein
Anne Quinkenstein

Posted on

TIL - CSS Box Model

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;
}

Dev Tools

Chrome
Mozilla1, Mozilla2

first step

Top comments (0)