Questions And Answers

More Tutorials

CSS Box Model

The browser creates a rectangle for each element in the HTML document. The Box Model describes how the padding, border, and margin are added to the content to create this rectangle.

CSS Box Model samples

The perimeter of each of the four areas is called an edge. Each edge defines a box.

  • The innermost rectangle is the content box. The width and height of this depends on the element's rendered content (text, images and any child elements it may have).
  • Next is the padding box, as defined by the padding property. If there is no padding width defined, the padding edge is equal to the content edge.
  • Then we have the border box, as defined by the border property. If there is no border width defined, the border edge is equal to the padding edge.
  • The outermost rectangle is the margin box, as defined by the margin property. If there is no margin width defined, the margin edge is equal to the border edge.

This CSS styles all div elements to have a top, right, bottom and left border of 5px in width; a top, right, bottom and left margin of 50px; and a top, right, bottom, and left padding of 20px. Ignoring content, our generated box will look like this:

div {
border: 5px solid red;
margin: 50px;
padding: 20px;
CSS Box Model with border and marging samples


In this page (written and validated by ) you learned about CSS box model . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS box sizing.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.