CSS Box Model Properties – Inline Elements

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.

This post talks about semantic inline elements.

Semantic inline elements are the kind of elements that describe the meaning of the text or content inside them. For example when you use the “strong” tag for a word inside a text, the purpose of the “strong” tag is to tell the reader that the word contained in the tag (the way the word is shown or represented in bold in the viewport) is a keyword or in some way important in the whole text. Some of the important inline elements in this category are,

  • span
  • em
  • i
  • strong
  • b
  • a
  • cite
  • code
  • q
  • sub
  • sup

 

  • Inline boxes are always as wide or high as the content inside them. You cannot use “width” or “height” on them. In other words, “width” or “height” cannot control their width or height. The height of an inline box can be controlled with “font-size”.
  • Again, “margin-top” or “margin-bottom” cannot control their margin-top or margin-bottom the way you might think about the classical box model.
  • If you use padding-top, padding-bottom, border-top or border-bottom on inline boxes, you need to be careful because the line height is not going to be influenced as a result of any of them. So you might end up with illegible text (lines, words or letter on top of others).

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: