CSS Box Model

A box in CSS consists of four distinct areas: content, padding, border, and margin.

Padding Area

The padding area is defined using the padding property. It can be set using shorthand notation, which follows a clockwise direction (top, right, bottom, left).

.demo-box {
  /* Single value: applies to all sides */
  padding: 20px;

  /* Two values: top/bottom, then left/right */
  padding: 20px 40px;

  /* Three values: top, left/right, bottom */
  padding: 20px 30px 40px;

  /* Four values: top, right, bottom, left */
  padding: 20px 20px 30px 10px;
}

Margin and Border Areas

The margin area uses the margin property, also with clockwise shorthand. The border area is styled with the border property, which can define width, style, and color for each side.

Content Area

The content area's dimensions are set by width and height properties. By default, these properties apply only to the content area.

The box-sizing property controls this behavior:

• content-box (default): width and height apply to the content area.
• border-box: width and height apply to the entire box, including padding and border.

.box-border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

Layout Strategies

Float-Based Layout

To arrange block-level elements horizontally, apply float: left or float: right.

.layout-example .floated-element {
  float: left;
}

A common issue is parent container collapse, where the parent loses its height. Solutions include:

• Setting a fixed height on the parent (not recommended).
• Applying overflow: hidden to the parent to trigger a new block formatting context (recommended).

Limitations include difficulty in distributing space evenly and verbose markup.

Inline-Block Layout

Set display: inline-block on elements to allow horizontal arrangement while respecting width and height.

.layout-example .inline-block-element {
  display: inline-block;
}

A challenge is the appearance of gaps between elements due to whitespace in the HTML. Solutions include:

• Removing whitespace between HTML tags (not recommended for readability).
• Setting the parent's font-size to 0 and resetting it on the child elements.

Flexbox Layout

Apply display: flex to a parent container to enable flexible layouts for its childern.

.flex-parent {
  display: flex;
}

Key properties for the flex container include:

• justify-content: Distributes space along the main axis. Values include flex-start, flex-end, center, space-around, and space-between.
• flex-direction: Sets the direction of the main axis.
• flex-wrap: Controls whether items wrap onto multiple lines.
• align-items and align-self: Align items along the cross axis.
• align-content: Aligns lines of items when there is extra space in the cross axis.
• flex: A shorthand for grow, shrink, and basis factors on flex items.
• order: Specifies the order of a flex item.