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:

CSS Layouts

The goal of this article is to introduce to your the concept of CSS layouts and how they are created. The article doesn’t give you detailed information or deal with code snippets. It rather helps you get the big picture and send you in the right direction.

This post is part of a CSS Layout Course that will teach you how to create functional layouts in CSS. If you’re interested in this topic and you’d like to have access to the complete course, please use the link at the end of this article.

Layout is a term used usually when you have more than one column beside one another on an HTML page rendered in a browser viewport. You have no “table” in your HTML markup responsible for that portion of the code. The elements generating the boxes standing beside each other in the viewport are all block-level elements. In this scenario, the term “layout” refers to how, well, the layout of those columns represent your content. For example, you have a section constructed with “main” that contains the main content in your page. You have an “aside” that contains some additional information related to the content in the form of a sidebar beside your “main”. Both “main” and “aside” are block-level elements and so they’re not able to stand beside each other in the width of a viewport as they break their own line as being parsed automatically. But with some trick and magic, you get them to stand beside each other and create a multi-column layout in the browser viewport. That is the kind of situation the term “layout” refers to.

I used the words trick or magic because CSS2.1 doesn’t have any native specialized modules to support multi-column layouts. In CSS3.0 we have the CSS Flexible Box but it cannot be used just yet because not every browser understands it yet. So we have to be happy with the those tricks for now and wait a few years until we can use those new modules. Moreover, not every website is going to change their existing layout technique just because a new module becomes available. If, say after a couple of years from now (date today 1/15/2017), you’re developing a new project from scratch, and if the new CSS3.0 Flexible Box module can be integrated into your existing workflow and tools, you might use it for production, otherwise you might consider using your old workflow and tools. And for existing projects that have already been written, they will not be touched or changed in any way unless they have to.

So let’s learn how we can do layouts with CSS right now without worry about the new CSS3.0 modules.

CSS layouts are mainly created with some techniques that use the CSS properties “position” and “float” along with their possible values. There’s also some instances where you use “display” but that could be thought of as a tool that is responsible for some small sections of layouts like navigation menus and not for the layout itself. The main problem to solve here is to get block-level boxes to live peacefully beside each other in the viewport width as if they were inline elements. That is what we want to learn here.

This post is part of a CSS Layout Course that will teach you how to create functional layouts in CSS. If you’re interested in this topic and you’d like to have access to the complete course, please use the link at the end of this article.