CSS Section 3

Box Model

The box model is the idea that everything in CSS is essentially a box (search for "CSS Box Model" on Google).

Each box consists of the following parts: content, padding, border, margin, width, and height.

Width & Height

These properties control the size of the content area.

Border

Borders define the edge around the padding. Important border-related properties:

• border-width – sets the thickness of the border
• border-style – sets the line type (e.g., solid, dashed, none)
• border-color – sets the color of the border

You can combine the above using the shorthand border property.

If you use box-sizing: border-box;, padding and border will be included inside the width and height.

Padding

Padding is the space between the content and the border.

You can use the shorthand padding or specific sides like padding-left, padding-right, etc.

Margin

Margin is the space outside the border — the distance between this element and others.

Display Property

Some elements are inline, others are block. The display property controls this behavior:

• inline – The element flows inline with other elements. Width and height are ignored. Padding and margin only affect horizontal space.
• block – The element takes up the full width available and respects all box model properties.
• inline-block – Like inline, but also respects the box model (width, height, margin, padding).

CSS Units

• Absolute Units
  • px (pixels)
  • pt (points)
  • cm (centimeters)
  • mm (millimeters)
  • in (inches)
• Relative Units
  • % – Percentage-based, relative to the parent element or property. For example, width: 50% means 50% of its parent container.
  • em – Relative to the font size of its parent. 1em = current parent font size.
  • rem – Relative to the root html element's font size (can be adjusted using html { font-size: ... }).