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:

CSS “display” Property

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.

The CSS display property is most often used for building CSS layouts or in cases where you are trying to position HTML elements. It’s so because it changes the way an element is represented on the view port, whether it’s going to be rendered as a block-level box, inline box, inline-block box, etc.

For example the HTML “li” tag creates a block-level box in the view port. So when you have a “ul” and some li’s inside it, you’ll have some li’s on top of one another in the view port, each taking up the whole view port width, the next one starting from the next line. That’s basically how block-level boxes behave. This is not helpful if you’re building a horizontal navigation menu with a “ul”. You’d want the li’s to be placed beside each other. You know that inline boxes do exactly the same thing. In the viewport, they take up exactly as much space as their content needs. And that is exactly what you’d need in this situation. So you simply write in your CSS,

ul li { display: inline; }

And the problem is taken care of.

The “display” CSS property takes the following values. Please note that I have omitted the values that are not so often used or not relevant to our discussion here:

  • inline
  • block
  • inline-block

There’s one more interesting value for the “display” property which is “none”. You use this value mostly when you want to get the browser not show the element. In some cases and techniques it’s very useful.

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: