Learn CSS: Box Model in CSS | Day 15 | Margin And Padding | Web development course

Visit - www.skyhgiehs.com

The Box Model in CSS: Margin and Padding
The box model is a fundamental concept in CSS that defines how elements are laid out on a web page. It's crucial for understanding how margins and padding work and how they affect the overall design of your website.

Components of the Box Model:

Content: The actual content of the element, such as text, images, or other HTML elements.
Padding: A transparent area around the content that adds space between the content and the border.
Border: A visual line around the padding.
Margin: A transparent area outside the border that creates space between the element and other elements.
Margin and Padding Properties:

margin: Sets the margin for all four sides of an element (top, bottom, left, right).
margin-top: Sets the margin for the top side of an element.
margin-bottom: Sets the margin for the bottom side of an element.
margin-left: Sets the margin for the left side of an element.
margin-right: Sets the margin for the right side of an element.
padding: Sets the padding for all four sides of an element.
padding-top: Sets the padding for the top side of an element.
padding-bottom: Sets the padding for the bottom side of an element.
padding-left: Sets the padding for the left side of an element.
padding-right: Sets the padding for the right side of an element.
Box Sizing:

There are two main approaches to box sizing:

Content-box: The default behavior, where the width and height properties only affect the content area. Margin and padding are added outside, increasing the overall size of the element.
Border-box: Width and height properties include the padding and border, making it easier to calculate element sizes. Margin is added outside the box.