Box Model Properties in CSS

The CSS Box Model describes the rectangular boxes generated for elements on a web page and includes margins, borders, padding, and the content area. Understanding these properties helps in controlling the layout and spacing of elements.

1. width

• Defines the width of the content area of an element.
• Values: Length (e.g., px, em, rem), Percentage (%).

2. height

• Defines the height of the content area of an element.
• Values: Length (e.g., px, em, rem), Percentage (%).

3. margin

• Creates space outside the element’s border, pushing other elements away.

• Values: Length (e.g., px, em), Percentage (%), or auto for centering.

  margin: 10px; /* Applies 10px margin on all sides */
  margin: 10px 20px; /* Vertical | Horizontal */
  margin: 10px 20px 30px; /* Top | Horizontal | Bottom */
  margin: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
  

4. padding

• Creates space inside the element’s border, pushing the content away from the border.

• Values: Length (e.g., px, em), Percentage (%).

  padding: 10px; /* Applies 10px padding on all sides */
  padding: 10px 20px; /* Vertical | Horizontal */
  padding: 10px 20px 30px; /* Top | Horizontal | Bottom */
  padding: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
  

5. border

• Defines the border surrounding the element’s padding and content.

• Shorthand:

  border: 1px solid black; /* Width | Style | Color */
  

• Individual properties:

  • border-width: Sets the width of the border (e.g., 1px, 2px).
  • border-style: Sets the style of the border (e.g., solid, dashed, dotted).
  • border-color: Sets the color of the border (e.g., black, #000, rgba(0,0,0,0.5)).

6. border-radius

• Rounds the corners of the border box.

• Values: Length (e.g., px, em), Percentage (%).

  border-radius: 10px; /* All corners */
  border-radius: 10px 20px; /* Top-left & bottom-right | Top-right & bottom-left */
  border-radius: 10px 20px 30px; /* Top-left | Top-right & bottom-left | Bottom-right */
  border-radius: 10px 20px 30px 40px; /* Top-left | Top-right | Bottom-right | Bottom-left */
  

7. box-shadow

• Adds shadow effects around an element’s frame.

• Values: Offset-x, Offset-y, Blur-radius, Spread-radius, Color.

  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  

8. box-sizing

• Defines how the width and height of an element are calculated.

• Values: content-box (default), border-box (includes padding and border in the element's width and height).

  box-sizing: border-box; /* Width and height include padding and border */
  

These properties are fundamental to controlling the layout and spacing of elements, allowing for precise adjustments to the size and position of your content.