Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson, we will take a proper look at the CSS Box Model so that you can build more complex layout tasks with an understanding of how it works and the terminology that relates to it.
The image below illustrates the box model:
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content
- content: The content of the box, where text and images appear
- padding: Clears an area around the content. The padding is transparent
- border: A border that goes around the padding and content
- margin: Clears an area outside the border. The margin is transparent
Example of Box Model:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.