Introduction to CSS Positioning Properties Part 1 - Inline and block boxes

(Page 3 of 6 )

As you probably know, several types of boxes are available in HTML. However, for the scope of this article, we reference only two types of boxes: inline boxes and block boxes.

Inline boxes: Inline elements are visually rendered as elements positioned next to each other. They’re commonly used to wrap small chunks of content given that a specific style is applied. The most common tag to be used for inline positioning is the <span> element, since it gives structure and context to any inline content in a Web document. For example:

While <span class="bolded">this text is highlighted</span>, the rest is normal.

Only using the <span> styled element, we’ve highlighted a chunk of text, within a sentence. The visual output for this example is the following:

As we can see, the highlighted text is visually rendered next to the normal text, behaving as an "inline element." There are other common HTML elements that default to behaving as "inline," such as <img> or <a>. However, these default behaviors may be changed using the CSS "display" property, as we’ll shortly see.

Let’s define the concept of block boxes.

Block boxes: Block elements are the type of boxes generated by elements such as <div>, <p>, or headers <h1>…<h6>. When they’re displayed in documents, the next element within the document structure will be positioned below of it, and not next to it. A clear example would be:

<h3>This is a block box</h3>

<h4>This is block box</h4>

<div>This is a block box</div>

The visual output would be as follows:

Inline and block boxes are simple but key concepts to start defining the layout and position of page elements, since they’re pretty easy to grasp. Once we’ve roughly described inline and block elements, we need to be able to position each element in our Web documents. CSS2 provides plenty of room for doing that. So, let’s dive into the CSS2 position schemes, in order to find out more about them.

Next: CSS 2 Positioning Schemes >>
 

More Style Sheets Articles
More By Alejandro Gervasio

Comments On: Introduction to CSS Positioning Properties Part 1

· Here's a quick guideline for commom CSS display properties. I think it's useful...    · For the sake of accuracy, there's a /p> missing tag in the article.   >>> Post your comment now!