Core CSS

Lesson 5: The Box Model

Overview

The basis of HTML is elements, each of which is inherently styled via the CSS box model. The box model consists of the content region, a region of padding around the content that forms a space between the content and its border, the border region that provides a frame around the content, and a margin region that provides spacing between the element and all other elements.

Regions of the Box Model

Reading from the outside to the inside, the box model consists of an outer region of space that makes up the margin, a frame region that makes up the border, an inner space region that makes up the padding, and the final content region that contains the featured content, which is typically a block of text or an image. Together, these regions make up the box model, with their relative positions displayed as shown.

 

The Box Model Layout

 

An Example Element

Here, we have an example element with all of the regions displayed. The margin region is shown in white between the thin body element border and the brown border frame of the element. The thin outer border is only used to make the margin visible. Otherwise, we would not be able to see the margin, since it is the same color as the body background: white. Next, we have the border of the element, which in this case is colored brown and styled to look like a picture frame; this is the main purpose of the border region. Inside the border, we have a gray region, which represents the padding of the element. It is colored gray via the element's background color property. Finally, the innermost region is the main content of the element, which in this case is an image of Christ in the vale of tears, but it could be text, video, or something else.

 

An Example of the Box Model

 

Two Different Content Regions

In this example, we display two elements side-by-side to illustrate how the model looks with two different types of content and how their margins affect each other. First, note the the body element has a solid black border that is 1 pixel wide; this is to illustrate the margin regions of the elements in the documents. Each of the elements is a div element. These divs are styled with a 20 pixel margin, a 3 pixel solid black border, and a 20 pixel padding region. The innermost content regions contain an image of the Mary Magdelene and text from the Book of Psalms. Notice that between the two elements, the space is twice as large because the margins add together there to create a 40 pixel space between the borders of the elements. The elements are also styled with float:left;, which we will ignore for now.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px black solid;float:left;">
    <div style="margin:20px;border: 3px black solid;padding:20px;
    background-color:lightgray;width:122px;height:150px;float:left;">
      <img src="ThePenitentMagdalene_GuidoReni.png">
    </div>
    <div style="margin:20px;border: 3px black solid;padding:20px;
    background-color:lightgray;width:250px;height:200px;float:left;">
      They have mouths, but do not speak;
      eyes, but do not see. They have ears, but do not hear;
      noses, but do not smell. They have hands, but do not feel;
      feet, but do not walk;
      and they do not make a sound in their throat.<br /><br />

      (Psalm 115:5-7)
    </div>
  </body>
</html>
 

An Image Region and a Text Region

 

The CSS boxel model is important to keep in mind when creating HTML documents because it is the basic format for all elements in an HTML document.

 

© 2007–2024 XoaX.net LLC. All rights reserved.