Suggest an editImprove this articleRefine the answer for “What is the Box Model in CSS? What parts make up the Box Model?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**The Box Model** is the model by which the browser calculates the size and space around every block-level element, made up of four areas: content, padding, border, and margin. **Key point:** together, content, padding, border, and margin determine the element's full visual size on the page.Shown above the full answer for quick recall.Answer (EN)ImageThe Box Model is a model by which the browser calculates the size and space around every block-level element. Any element in CSS is treated as a rectangular box made up of four areas (from the center outward): 1. **Content**, the content (text, image, the element's content). 2. **Padding**, the inner spacing between the content and the border. 3. **Border**, the element's border. 4. **Margin**, the outer spacing that creates space between the element and its neighbors. ## Diagram ```javascript +-------------------------+ | margin | | +-------------------+ | | | border | | | | +-------------+ | | | | | padding | | | | | | +---------+ | | | | | | | content | | | | | | | +---------+ | | | | | +-------------+ | | | +-------------------+ | +-------------------------+ ``` Content + padding + border + margin, determine the element's full visual size on the page.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.