Model & Layouts

The CSS Box Model Explained (With Examples)

The CSS Box Model is a fundamental concept that describes how elements are structured and spaced in a webpage. Every HTML element is represented as a rectangular box with the following layers:

Box Model Components

• Content: The actual content inside the element, such as text or images.
• Padding: Space around the content, inside the border.
• Border: The edge of the element, surrounding the padding.
• Margin: The outermost space that separates the element from others.

Example

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

Mastering CSS Floats and Positioning

CSS provides different ways to control the placement of elements on a page.

Floats

The float property allows elements to be positioned to the left or right, making text wrap around them.

.image {
  float: left;
  margin-right: 10px;
}

Positioning

The position property helps define an element’s placement:

• Static (default) – Elements appear in normal document flow.
• Relative – Positioned relative to its normal position.
• Absolute – Positioned relative to the nearest positioned ancestor.
• Fixed – Stays in place regardless of scrolling.

Example:

.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
}

The Difference Between Inline, Block, and Inline-Block Elements

Elements in CSS are displayed in different ways:

Block Elements

• Take up the full width available.
• Start on a new line.
• Examples: <div>, <p>, <h1>.

div {
  display: block;
}

Inline Elements

• Take up only as much width as necessary.
• Do not start on a new line.
• Examples: <span>, <a>, <strong>.

span {
  display: inline;
}

Inline-Block Elements

• Behave like inline elements but allow setting width and height.

.inline-box {
  display: inline-block;
  width: 100px;
  height: 50px;
}

Conclusion

Understanding the CSS Box Model and layout techniques is essential for creating well-structured web pages. Mastering positioning, floats, and display properties will help you design flexible and visually appealing layouts.