The CSS box model is the foundation of web layout. Every HTML element is a rectangular box consisting of four layers: content (the text or image), padding (space between content and border), border (the visible outline), and margin (space between this element and its neighbors). By default, width and height set the content size only — padding and border add to the total size. The box-sizing: border-box property changes this so that width includes padding and border, which is almost always what you want. Understanding the box model is essential for debugging layout issues.
glossary2 min read
CSS Box Model Explained
The CSS box model defines how elements are sized and spaced. Learn content, padding, border, and margin.
Try these tools
More glossary articles
What is WebP?
WebP is a modern image format by Google offering superior compression. Learn when and how to use WebP images.
What is HEIC?
HEIC is the default photo format on iPhones. Learn what it is, why Apple uses it, and how to convert it.
What is JSON?
JSON (JavaScript Object Notation) is the standard data format for web APIs. Learn the syntax and common uses.
What is Regex?
Regular expressions (regex) are patterns for matching text. Learn the basics and common use cases.