Content Area

CSS Content Area

The content area is the innermost part of the CSS box model. It is where an element's text, images, and other content are displayed before padding, borders, and margins are added around it.

What is the Content Area?

The content area is the center of an element's box. It contains the actual content displayed by the element and is surrounded by the padding, border, and margin areas.

Content → Padding → Border → Margin

The content area exists even when an element has no padding, border, or margin.

What Goes in the Content Area?

The content area can contain text, images, form controls, and other HTML elements. The type of content depends on the element and the HTML placed inside it.

<div>
  <h2>Heading</h2>
  <p>This paragraph is content inside the div.</p>
</div>

In this example, the heading and paragraph are content inside the <div> element.

Content Width

With the default box-sizing: content-box; behavior, the CSS width property specifies the width of the content area.

div {
  width: 300px;
}

Padding and borders, when present, are added outside this 300-pixel content width.

Content Height

With box-sizing: content-box;, the CSS height property specifies the height of the content area.

div {
  height: 100px;
}

Setting a fixed height does not guarantee that all content will fit inside the available area. If the content requires more space, it may overflow the box.

Automatic Content Sizing

Elements do not always need an explicit width or height. Their dimensions can often be determined automatically by normal CSS layout and the available space.

div {
  background-color: #eeeeee;
}

For many block elements in normal flow, an auto width uses the available horizontal space, while an auto height grows as needed to contain the element's in-flow content.

Allowing content to determine the height is often more flexible than assigning a fixed height, especially when the amount of text may change.

Content, Padding, and Borders

Padding and borders surround the content area. With the default box-sizing behavior, adding them increases the size of the element's border box without changing a declared content width.

div {
  width: 300px;
  padding: 20px;
  border: 5px solid #333333;
}

The content area remains 300 pixels wide. The left and right padding add 40 pixels and the borders add another 10 pixels, producing a border-box width of 350 pixels.

300px content
+ 40px padding
+ 10px border
= 350px border-box width

Content Area and Box Sizing

The relationship between a declared width or height and the content area changes when box-sizing: border-box; is used.

div {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #333333;
}

In this example, the 300-pixel width includes the content, padding, and borders. The content area becomes smaller so the complete border box remains 300 pixels wide.

The Box Sizing tutorial later in this section examines this behavior in more detail.

Try the Content Area

Edit the width, height, padding, and content in the example to see how the content area changes and how surrounding parts of the box affect the element's overall size.

Summary

The content area is the innermost part of the CSS box model and contains an element's text, images, and other content. With the default content-box sizing, the width and height properties apply to the content area, while padding and borders are added around it.

The next tutorial covers Width & Height and how these CSS properties control element dimensions.