In the last article we learned about width and height properties of CSS in detail and now it's time to see what the Css Box Model is.
Let's begin...
Let's begin...
The CSS Box Model
While learning Css Box model we will consider HTML elements as boxes. CSS box model is used to discuss design and layout of boxes that are HTML elements.
CSS box model includes following parts:
- Content - This is the main and core part of the box. All the text, image, and other content are in this part.
- Padding - This is the area around the content. The padding is transparent.
- Border - Boundary around content and padding.
- Margin - This is the area outside the border. The margin is also transparent.
Just remember:
Total width of element = width + left margin + left border + left padding + right padding + right border + right margin
Total height of element = height + bottom margin + bottom border + bottom padding + top padding + top border + top marginThat's all for today. Practice using box-model with various examples. You can also practice on Free Code Camp to enhance your skills. In the next part, we will learn about some other CSS properties.
Till then #keepCoding.
