← CodePrimer
CSS
Beginner
Layout
CSS box model
Why is my element wider than expected?
content + padding + border + margin.
.box {
box-sizing: border-box;
width: 320px;
padding: 16px;
border: 2px solid #cbd5e1;
margin: 12px;
}Notes
border-box includes padding/border inside width — usually what you want.
Keywords: box model · padding · margin · border · width
Related
HTML
HTML headings h1–h6
How do I create page headings?
CSS
Three ways to apply CSS
What are inline, internal, and external CSS?
PHP
Embed PHP inside HTML
How do I mix PHP and HTML?
HTML
Paragraphs and line breaks
How do I break text into paragraphs?
PHP
PHP comments
How do I write comments in PHP?
HTML
Hyperlinks with href
How do I make a clickable link?