The CSS box model is the idea that all elements in HTML are boxes and each box has border. Each box/element then has a content area, padding area, border area and margin area. By default the content area will be as wide and as tall as the contents inside the element, and the padding, border and margins are 0 or the browser's defaults, which vary from browser to browser.
- width
- height
- padding
- margin
- border
- box-sizing
- Done create line breaks after them
- Occupies space necessary for it content
- Appear on the same "line"
- Not containers/Should not have children
- Do not respect height and width css properties, but respect padding, border and margin.
- Examples:
<span>, <a>, <img>, <strong>
- Occupy all available width
- As tall as its content.
- Create a line break after them
- Generally containers/Have other elements inside
- Respect all css box model properties: height, width, padding, border, margin.
- E.g.
<div>, <h1>, <li>, <p>
- CodePen with code written in class https://codepen.io/alejo4373/pen/ExZEyVW?editors=1100
- W3Schools - Box Model https://www.w3schools.com/css/css_boxmodel.asp
- CSS Tricks - Box Model https://css-tricks.com/the-css-box-model/https://css-tricks.com/the-css-box-model/