Code Fellows Reading Notes

Box Model

The box model is an important concept to understand when designing the layout of your site because it determines how each element will be displayed, and also how the element will affect the space around the content. Consider each element on your page to be a box; the dimensions of this box will be determined by the element content and CSS. The diagram above shows you each piece that is explained below.

• Content: The size of the content for your element after any constraints (height, width, wrap, etc.)
• Padding: This is the space immediately surrounding your content and inside the border (transparent)
• Border: A border surrounding the padding and content, like the sides of a box
• Margin: Space surrounding the border of an element (transparent)

By understanding how the box model works, you can define the spacing within an element, the spacing between elements, and also add flair with properties like box shadows, border decorations, border radius, and much more. Most importantly, once you understand how the box model works, it will be much easier to utilize dev tools to troubleshoot your site when it’s not rendering how you thought it would.