CSS: Box Model
- 1. CSS: Box Model Name: Utsav singh Enrolment: 180140111103 Sub: Web Technology prof: Khusbhu Tailor
- 2. CSS Box Model • All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. • The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
- 3. CSS Box Model The image below illustrates the box model:
- 4. Explanation of the different parts: • 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
- 5. Explanation of the different parts: • The box model allows us to add a border around elements, and to define space between elements.
- 6. Maths 320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px
- 7. Maths • The total width of an element should be calculated like this: • Total element width = width + left padding + right padding + left border + right border + left margin + right margin. • The total height of an element should be calculated like this: • Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
- 8. Thanks