1. Size & Color

The <div> is a block-level container. We define its area using width and height.

div {
  width: 300px;
  height: 150px;
  background-color: #a855f7;
}

💡 Block-level means it starts on a new line and takes up the full width available by default.

Styled Div

2. Margin & Padding

Margin

Space outside the container. It pushes other elements away.

div { margin: 40px; }

Padding

Space inside the container. it pushes content away from the edges.

div { padding: 20px; }

Margin (External)

CONTENT

Padding (Internal)

3. Border Styling

The border property requires three values: Width, Style, and Color.

div { border: 3px solid white; }

Common Styles:

  • solid: A single continuous line.
  • dashed: A series of short line segments.
  • dotted: A series of points.
Solid
Dashed
Dotted

Master Layout Box

Combining all properties to create a structured section for a webpage.

div {
  width: 100%;
  background: #0f172a;
  border: 2px solid #a855f7;
  padding: 20px;
  margin: 10px;
  color: white;
}

Container Title

This is a fully styled division container used for layout organization.