Learning Modern HTML and CSS — Part 9

Block boxes vs inline boxes

In the previous posting we focused on the box model, but we only worked with <p> elements, which as classed as “block” elements when it comes to the CSS box model.

These types of elements occupy 100% of their parent elements width, regardless of the amount of content. This is why the colour background (by default) stretched the whole width of the screen rather than just the width of the text itself….

“block” elements are always stacked one on top of the other, never side by side.

You can also supply a height and width value to “block” elements.

In contrast, “inline” elements do not occupy 100% of the container element…instead they occupy just the size needed for the element itself. This means that in-line elements don’t have to stack one on top of the other…they can comfortably sit side-by-side.

Also, with inline elements, you cannot specify a height and width to an inline element, as nothing will happen if you do. Also, with paddings and margins, the values are only applied horizontally (left and right), the values for top and bottom would be ignored.

let’s demonstrate this visually with the following code:

  <article class="article-class">
    <h2>Here is my main content</h2>

    <p class="first-block">First block Element, with background set to blue</p>
    <p class="second-block">Second block Element, with background set to red</p>
    <p class="third-block">Third block Element, with background set to green</p>

    <span class="first-inline">First in-line Element, with background set to blue</span>
    <span class="second-inline">Second in-line Element, with background set to red</span>
    <span class="third-inline">Third in-line Element, with background set to green</span>

  </article>

now let’s set the CSS as follows:

.article-class {
  width: 1500px;
}

.first-block {
  background-color: blue;
  padding: 10px;
  margin: 10px;
}

.second-block {
  background-color: red;
  padding: 10px;
  margin: 10px;
}

.third-block {
  background-color: green;
  padding: 10px;
  margin: 10px;
}

.first-inline {
  background-color: blue;
  padding: 10px;
  margin: 10px;
}

.second-inline {
  background-color: red;
  padding: 10px;
  margin: 10px;
}

.third-inline {
  background-color: green;
  padding: 10px;
  margin: 10px;
}

Here’s the result…

So you can see the “block” elements occupy 100% width of the parent element, which in this case is the <article> element. They have also applied padding around all sides, including above and below them (as seen by the white gaps between them)

In contrast, the “inline” elements <strong> can be placed side by side, and the margin has been applied side-by-side, but not above and below.

The following elements are “block” elements:

The following are “inline” elements:

So you can see, it’s generally hyperlinks, images, buttons, and <strong> and <em> that are inline elements, and that makes sense because you’d often want to display these types of elements side by side on a page.

Now you can of course alter this default behavior….you make make a “block” element act like it’s an inline element, and vice-versa, make an “inline” element, act like a block element…..you do this with the “display” option in CSS…..let’s swap them over….

.article-class {
  width: 1500px;
}

.first-block {
  display: inline;
  background-color: blue;
  padding: 10px;
  margin: 10px;
}

.second-block {
  display: inline;
  background-color: red;
  padding: 10px;
  margin: 10px;
}

.third-block {
  display: inline;
  background-color: green;
  padding: 10px;
  margin: 10px;
}

.first-inline {
  display: block;
  background-color: blue;
  padding: 10px;
  margin: 10px;
}

.second-inline {
  display: block;
  background-color: red;
  padding: 10px;
  margin: 10px;
}

.third-inline {
  display: block;
  background-color: green;
  padding: 10px;
  margin: 10px;
}

which gives us this…..

Mixing the two types?

So what if you wanted multiple hyperlinks to appear side by side (which they would by default as they are “inline” elements) but you also wanted to add a bit of margin to the top of the element? Currently you can only add margin to the left and right of “inline” elements….. but if we switch them to a display type of “inline-block” then we can take advantage of margin-top and margin-bottom as well.

Let’s show this by changing the first element to an “inline-bock” to see what happens…

.first-block {
  display: inline-block;
  background-color: blue;
  padding: 10px;
  margin: 10px;
}

.second-block {
  display: inline;
  background-color: red;
  padding: 10px;
  margin: 10px;
}

.third-block {
  display: inline;
  background-color: green;
  padding: 10px;
  margin: 10px;
}

which gives us this….