Today, I focused on the CSS Box Model, a key concept for layout and design. Here's a summary of what I learned:
Box Model Components:
Height: Defines the height of the content area of an element.
Width: Defines the width of the content area of an element.
Padding: Space between the content and the border. It creates an inner buffer around the content.
Border: Surrounds the padding and content area, providing a visible edge.
Margin: Space outside the border that separates the element from other elements on the page.
Detailed Properties:
Height:
height: Specifies the height of the content area.
Width:
width: Specifies the width of the content area.
Padding:
padding-top: Space above the content.padding-right: Space to the right of the content.padding-bottom: Space below the content.padding-left: Space to the left of the content.
Border:
border-width: Sets the thickness of the border.border-style: Defines the style of the border (e.g., solid, dashed, dotted).border-color: Sets the color of the border.
Margin:
margin-top: Space above the element.margin-right: Space to the right of the element.margin-bottom: Space below the element.margin-left: Space to the left of the element.
Here is an example of CSS code:
/* Box Model Components */
.element {
height: 100px; /* Height of the content area */
width: 200px; /* Width of the content area */
padding: 10px; /* Space between the content and the border */
border: 2px solid black; /* Border surrounding the padding and content */
margin: 20px; /* Space outside the border */
}
/* Detailed Properties */
.element {
padding-top: 10px; /* Space above the content */
padding-right: 15px; /* Space to the right of the content */
padding-bottom: 10px; /* Space below the content */
padding-left: 15px; /* Space to the left of the content */
border-width: 2px; /* Thickness of the border */
border-style: solid; /* Style of the border */
border-color: black; /* Color of the border */
margin-top: 20px; /* Space above the element */
margin-right: 25px; /* Space to the right of the element */
margin-bottom: 20px; /* Space below the element */
margin-left: 25px; /* Space to the left of the element */
}