Read Aloud the Text Content

This audio was created by Woord's Text to Speech service by content creators from all around the world.

Text Content or SSML code:

Written by Erin Glass This tutorial will teach you the difference between inline-level and block-level elements in HTML and how they affect a piece of content's position on the page. When arranging elements in an HTML document, it's important to understand how these elements take up space on a webpage. Certain elements can take up much more space on the webpage than the content they contain. Understanding the behavior of different element types will help you anticipate how they affect the position of other elements on the page. In general, there are two different types of elements— inline-level elements and block-level elements —whose spacing defaults behave differently the position of nearby elements. Inline-level Elements Inline elements are elements whose horizontal width is determined by the width of the content they contain. The <strong> element and the <em> element we covered in the last tutorial are both examples of inline elements. We can use Firefox's Web Developer Inspector to inspect the size of HTML elements on a webpage. (If you are using Chrome, you can use the Developer Inspect Elements tool instead but this tutorial will give instructions for Firefox's Web Developer tool.) Return to the index.html file that you loaded in your browser. If you need to reload it and don't remember how, refer to the instructions Loading an HTML File in your Browser from the last tutorial. Then navigate to the Tools menu item in the top menu bar and select