part-3

CSS Box Model

The CSS Box Model describes the rectangular boxes generated for elements in the document tree. Every HTML element is essentially a box with four areas: content, padding, border, and margin. Understanding this model is essential to control spacing, sizing, and layout of elements in your webpage.

MDN - CSS Box Model

Box Model Structure

height

By default, it sets the content area height of the element.

div {
    height: 100px;
}

• Content area grows vertically based on this value.
• If content overflows, you may need to use overflow property.

width

By default, it sets the content area width of the element.

div {
    width: 800px;
}

• Similar to height, this sets only the content box width.
• Use max-width or min-width to control responsiveness.

border

Used to set an element's border.

• Components:

  • border-width: thickness of the border
  • border-style: style such as solid, dashed, dotted, etc.
  • border-color: sets the border's color

• Shorthand Syntax

  div {
      border: 2px solid blue; /* Thickness, Style, Color */
  }

  Format: border: [width] [style] [color];

• Border Sides

  To control an individual side of the box.

  border-left   /* Left side border */
  border-right  /* Right side border */
  border-top    /* top side border */
  border-bottom /* Bottom side border */

• border-radius

  Rounds the corners of the box:

  div {
      border-radius: 20px; /* Rounds all 4 corners */
  }
  
  div {
      border-radius: 50%; /* Perfect circle for square elements */
  }
  
  div {
      border-top-right-radius: 10px; /* Sets top right corner radius to 10px */
  }

  MDN Border Radius Docs

padding

Padding is the space between the content and the border. It pushes the border outward.

div {
    padding: 50px; /* All 4 sides */
}

div {
    padding-left: 50px; /* Left side */
}

• Padding Sides

  padding-left   /* Left side padding */
  padding-right  /* Right side padding */
  padding-top    /* Top side padding */
  padding-bottom /* Bottom side padding */

• Padding Shorthand

  • For all 4 sides:

    padding: 10px;

  • top & bottom | left & right:

    padding: 10px 20px;

  • top | left & right | bottom:

    padding: 10px 20px 30px;

  • top | right | bottom | left:

    padding: 10px 20px 30px 40px;

margin

To set spacing on the outside of border.

div {
    margin: 50px; /* All 4 sides */
}

div {
    margin-left: 50px; /* Left side */
}

• Margin Sides

  margin-left   /* Left side margin */
  margin-right  /* Right side margin */
  margin-top    /* Top side margin */
  margin-bottom /* Bottom side margin */

• Margin Shorthand

  Same structure as padding:

  • All 4 sides:

    margin: 10px;

  • Top & Bottom | Left & Right:

    margin: 10px 20px;

  • Top | Left & Right | Bottom:

    margin: 10px 20px 30px;

  • Top | Right | Bottom | Left:

    margin: 10px 20px 30px 40px;

display

It sets whether an element is treated as a block or inline element and the layout used for its children.

display: block;        /* Takes full width, starts on a new line */
display: inline;       /* Fits in line with text */
display: inline-block; /* Behaves like inline, but allows width & height */
display: none;         /* Hides the element entirely */

MDN Display Docs

Inline Vs Block

Inline and Block Conclusions

Units in CSS

Absolute Units

Unit	Description
px	Pixels
pt	Points
pc	Picas
cm	Centimeters
mm	Millimeters
in	Inches

Relative Units

Unit	Description
%	Relative to parent element
em	Relative to parent font size
rem	Relative to root (html) font size
ch	Relative to width of the "0" character
vh	Relative to 1% of the viewport height
vw	Relative to 1% of the viewport width

• Percentage (%)

  It is often used to define a size as relative to an element's parent object.

  div {
      width: 50%;       /* 50% of parent's width */
      margin-left: 10%; /* 10% of parent's width */
  }

• em (Relative to parent font size)

  em: Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.

  Used to size elements based on the font size of their immediate parent.

  /* If parent font-size is 20px */
  
  .parent {
      font-size: 20px;
  }
  
  .child {
      font-size: 2em; /* 2 * 20px = 40px */
  }

  • Drawback of em: Snowball effect in nested elements

• rem (Relative to root <html> font size)

  rem: Font size of the root element.

  Used to size elements based on the root element’s (<html>) font size - more predictable and consistent for scalable designs.

  html {
      font-size: 16px;
  }
  
  div {
      font-size: 2rem; /* 2 * 16px = 32px */
  }