CSS Content Area

The content area is the innermost part of the CSS box model and contains an element's text, images, child elements, or other content.

The size of the content area depends on the element, its content, its CSS sizing properties, and the box sizing model being used. Padding, borders, and margins surround the content area but are separate parts of the box model.

What the Content Area Contains

The content area is where the actual contents of an element are laid out. Depending on the element, this can include text, images, links, form controls, or child elements.

<div class="box">
  <h2>Heading</h2>
  <p>This heading and paragraph are content inside the div element.</p>
</div>

In this example, the heading and paragraph are laid out within the content area of the <div> element.

Content Area Size

The content area has a width and height. Depending on the element and its CSS, these dimensions may be determined automatically from the available space and content or controlled with sizing properties.

.box {
  width: 300px;
  height: 150px;
}

When the default box-sizing: content-box is used, these values specify the width and height of the content area. Padding and borders are added outside those dimensions.

The width and height properties are covered in greater detail on the next tutorial page.

Automatic Sizing

Elements do not always need an explicit width or height. The initial value of both width and height is auto, allowing the browser to determine the used size according to the element and its layout context.

.box {
  width: auto;
  height: auto;
}

For example, a normal block element generally uses the available inline space of its containing block, while its height normally grows as needed to contain its content.

Leaving dimensions automatic is often useful because the content area can adapt when text changes or the available space becomes larger or smaller.

Content Area and content-box

The default value of the box-sizing property is content-box. With this sizing model, a declared width and height apply to the content box.

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

The content area in this example is 300px wide. The left and right padding and borders are added outside that width, producing a border-box width of 350px.

The later Box Sizing tutorial explains how border-box changes this calculation.

Content and Padding

Padding surrounds the content area and creates space between the content and the border. Padding does not become part of the content area when the element uses content-box.

.box {
  width: 300px;
  padding: 25px;
}

Here, the content area remains 300px wide. The 25px of padding is placed around it.

The element's background is painted behind both the content and padding areas by default, so a background color alone does not show where the content area ends and the padding begins.

Content That Does Not Fit

If an element is given a fixed size that is too small for its content, the content may extend beyond the available content area.

.box {
  width: 200px;
  height: 50px;
}

By default, overflowing content is generally visible rather than being automatically clipped. The overflow property can control what happens when content does not fit within an element's box.

Overflow is covered in detail later in this Box Model tutorial section.

Content Area Example

The following example uses an inner element to highlight the content area separately from the padding around it. The outer box has a fixed width, padding, and border.

.box {
  width: 300px;
  padding: 30px;
  border: 5px solid steelblue;
  background-color: lightblue;
}
.content {
  background-color: white;
}

Open the example in the editor and change the width of the box and the amount of padding. The white area contains the example content, while the light blue area makes the surrounding padding easy to see.

Play in Editor