Inline Elements and Boxes

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

To know about the difference between “elements” and “boxes”, please go to Block-level Elements and Boxes. If you’ve landed on this page from within the course page, then you must have already read that part.

Here’s the important characteristics of inline elements that you should understand:

  • As opposed to block-level elements like p, inline elements generate the kind of boxes that get only as wide as the content inside them.
  • As opposed to block-level boxes, inline boxes don’t have an integrated line breaking mechanism. That means, they do not start on a new line, nor do them break their own line.
  • Inline elements can contain text and other inline elements but no block-level elements.

Here’s a list of a few famous inline elements:

  • a
  • b
  • big
  • i
  • small
  • tt
  • abbr
  • acronym
  • cite
  • code
  • dfn
  • em
  • kbd
  • strong
  • samp
  • time
  • var
  • a
  • bdo
  • br
  • img
  • map
  • object
  • q
  • script
  • span
  • sub
  • sup
  • button
  • input
  • label
  • select
  • textarea

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

Block-level Elements and Boxes

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

As the title of this post suggests, there are,

  • Block-level elements, and,
  • Block-level boxes

The term “element” refers to to source code that you write. The term “box”, on the other hand, refers to how that element is represented on the browser view port.

For example, when you write an HTML p tag in your HTML document and write some text between the opening and closing p tags, the whole combination of the opening p tag, the closing p tag and the text inside the tags is rendered or represented in a specific way in the browser view port. Among other characteristics, the text starts on a new line; the paragraph takes up the whole view port width, no matter how wide the browser windows is at the moment,  and no matter how much content the p tag has. Moreover, the next box starts on the next line in the view port.

The whole content of the p tags (the text) and the way the paragraph is represented in the viewport can be resembled to a box on the view port and hence the term “box”. You could therefore say that a box is the representation of an HTML tag and its contents in the view port. You’ll see this and we’ll explain it more in the video related to this lecture (see the course description below).

Now there are some characteristics of block level elements and boxes that you should be familiar with, especially if you want to create layouts, using HTML and CSS.

Block-level boxes, created from block-level elements in your HTML source code, always begin on new lines and break their own line. That means a p tag and all of its contents start on a new line and the next element in the code starts from the next line even if there’s still free space on the line not filled by the p tag contents.

Block-level elements can contain other block-level and inline elements. We’ll learn more inline elements later. For example, you can have a paragraph (opening and closing p with some text as its content) and inside the paragraph, you can have another same combination like the following:

<p>Lorem Ipsum is simply dummy<p>a block-level element inside another block-level element</p>  text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>

block-level and inline  distinctions and terminology have been replaced with other terminology in HTML5 like “flow content”, “phrasing content”, etc. We’ll deal with them in another course. Those older specifications that we’re dealing with right now are covered in HTML specifications up to 4.01. As a web developer you need to know the older specifications as well since you’re still going to have to work with them at least in next 5 years to come.

Here’s a list of some block-level elements:

  • address
  • figure (HTML5)
  • noscript
  • article (HTML5)
  • footer (HTML5)
  • ol
  • aside (HTML5)
  • form
  • output (HTML5)
  • blockquote
  • h1, h2, h3, h4, h5, h6
  • p
  • br
  • header (HTML5)
  • pre
  • canvas (HTML5)
  • hgroup (HTML5)
  • section (HTML5)
  • dd
  • hr
  • table
  • div
  • li
  • tfoot
  • dl
  • main
  • ul
  • fieldset
  • nav
  • video (HTML5)
  • figcaption (HTML5)

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address: