Block vs. inline - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

24
Block vs. inline

Most major HTML elements—headings, paragraphs, lists, tables, and divs—are block elements. When an element is a block element, it means the browser doesn’t put any other element beside it. If you write a heading, then a paragraph, then a list, the heading will begin on a new line. The paragraph will begin on a new line. The list will begin on a new line.

Block elements can be placed side-by-side, but only if you specify special styling. Divs are block elements, but we place them side-by-side all the time using something called float, for example when we place a sidebar next to a content section. You’ll learn more about this later.

All block elements inside a div own their own horizontal space only inside that div. If your CSS specifies that two divs are to be placed side-by-side, then of course elements of one div will sit next to elements of the other div. It’ll be like two columns, with each element having its own horizontal space, but only within its column.

In addition to starting each block element on a new line, the browser will add extra space between them. Later you’ll learn to adjust this space using CSS.

Inline elements don’t start on a new line. For example, a link is an inline element. If you write…

<p>To find the color that complements your complexion, try our <a href="color-picker.html">Color Picker</a>.</p>

…the a href element doesn’t start on a new line. That’s good, because you want it to be part of the sentence flow, not set off.

You may find it surprising that images are inline rather than block elements. If you write…

<img src="pic-1.jpg">
<img src="pic-2.jpg">
<img src="pic-3.jpg">

…the three images will be arrayed across the div, if there’s room for them all.

You can convert images into block elements using CSS.

img.owns-its-own-line {
display: block;
}

Now any image assigned to the class “owns-its-own-line” won’t share horizontal space with other images.

In your CSS file code a class of images that displays as a block. In your HTML file assign that class to the loris image that you’ve already coded. Then duplicate that image tag. Now you have two images of the loris. Save the files and display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-24-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-24-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/24.html