CSS3 Block-Level and Inline-Level Elements
CSS3 Basics - Part 10
Forward: In this part of the series we look at what is meant by Block-Level and Inline-Level Elements.
By: Chrysanthus Date Published: 23 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
Normal Flow
As you add elements in the body element or in a div element, the elements fit themselves in a horizontal line. That is, the elements would be displayed in a horizontal line in the browser, everything being equal. If the elements are too many, they wrap into the next line. This behavior is called the Normal Flow of elements. In any horizontal line, the tallest element determines the height of the line. That is, the elements may have different heights, but the height of the line is that of the tallest element. This normal flow will always be respected independent of whether you type the elements horizontally or Vertically in the HTML document (text editor).
Illustration
For this illustration, you need two small images (image files) and the following HTML document. So copy two small images into the directory in which you will save the following code as an HTML file.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<span style="background-color:gold">A phrase</span> <img src="firstImg.gif" /> <span style="background-color:cyan">Another phrase</span> <img src="secondImg.gif" />
</body>
</html>
Try the code by saving it as an HTML file, using a text editor and then open it in a browser; replace the image file names in the code with the actual image file names in your directory.
In the code, you have a span element, then a space, then an image element, then a space, then another span element, a space and finally an image. At the display, all these items are shown on a line of the body element. If the line is short, the elements are wrapped into the next line. Note: if any of the space is made by typing the spacebar more than once, at the browser, you would have only one space (equivalent to typing the spacebar once).
You can break the normal flow using the line break element (<br>). The line break element forces whatever is on its right on the line, to the next line. This is what we saw with text; the same thing is applicable to elements. Try the following code and you will notice that the second span element and second image element are on the next line:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<span style="background-color:gold">A phrase</span> <img src="firstImg.gif" /> <br><span style="background-color:cyan">Another phrase</span> <img src="secondImg.gif" />
</body>
</html>
In the above code, the line break element has been included after the first image element. So at the display, you have two lines: The first line has the first span element and the first image element; the second line has the second span element and the second image element.
For the code just mentioned, there are two lines at the browser because of the line break element. So, if we want three lines at the browser from these four elements, all we need to do is to include a line break element in another position among the four elements. Try the following code and note that at the browser there are three lines:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<span style="background-color:gold">A phrase</span> <img src="firstImg.gif" /> <br><span style="background-color:cyan">Another phrase</span><br> <img src="secondImg.gif" />
</body>
</html>
In the code you have a line break element just before the second span element and just after this same span element. In the first line at the display (browser) you have the first span element and the first image element; in the second line, you have only the second span element; in the third line you have the second image element. So we have got three lines from a series of elements. We achieved this simply by putting two line break elements at different positions among the four elements. If you do not use the line break elements, you would only have new lines as a result of element wrapping at the end of the line (just like with text wrapping in a word processor).
I want you to note that in the above code, we have a line break element just before the second span element and just after it. In this way the second span element stands alone on a line. The HTML developers made some elements like this. Such an element has an implicit line break element just before it and just after it. Well, you the web site designer do not see these line break elements of the elements, in your code. These elements are called block-level elements. Examples of block-level elements that we have seen, are the div element, the hr element and the p element. Try the following code to demonstrate this:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>DIV Element</div> <p>Paragraph Element</p> <hr />
</body>
</html>
Each of the above block-level elements occupies a horizontal stripe (line) at the browser. With inline elements (elements like the image elements that would be on one line), a space in between two inline elements fits itself in the normal flow. With block-level elements a space in between two block-level elements should fit itself in a separate line in between the two block level elements (at the browser). This is because the line break element just after the previous block-level element forces whatever comes after it to the next line and the line break element just before the next block-level element forces the block-level element to a new line. Well, in practice, when a browser sees a space between two block-level elements it might not display the space and so one block-level element would appear immediately below the previous block-level element.
If you want a blank line in between two block-level elements, include the line break element in between the two block-level elements in the code. Try the following example and note that there is a blank line between the div element and the p element.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>DIV Element</div> <br><p>Paragraph Element</p> <hr />
</body>
</html>
A containing element is an element that can house other elements. An inline-level element is an element that fits itself within a line of text. A block-level element is an element whose width is the width of the containing element.
List of Inline Elements
- All text level elements, e.g. the strong and the time elements
- span element
- Image element
- audio element
- video element
- All form controls, e.g. the button control
- label element
List of Block Level Elements
- All section elements e.g. the article element
- All heading elements, e.g. h1
- table element
- All grouping elements (p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, div)
Converting a Block Level Element to an Inline Element
You can convert a block element to an inline element. To do this, you use the following attribute and value in the start tag of the element:
style="display:inline"
With this, the element should fit itself within a line of text. The height of the line becomes the height of the highest element in the line.
To float the converted element to the right, the attribute is modified as follows:
style="display:inline; float:right"
To float the converted element to the left, the attribute is modified as follows:
style="display:inline; float:left"
Note the use of the colon and semicolon.
Inline to Block Element?
You can convert an inline element to a block level element. However, hardly would you have the need to do this. So I will not go into that.
Time to take a break. We stop here for now. Rendezvous in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT