DEV Community

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

Posted on

3 2

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up