featured13

Conquer CSS by Understanding Inline and Block Level Elements

‌‌
HTML is comprised of essentially two different kinds of elements, either inline or block. But what are the differences between inline and block level elements elements and why should you care? There are a lot of different answers to that question, but probably the most important reason why you should care is that knowing whether something is inherently inline or block will help you with your CSS and styling immensely. If you can understand why the elements you're trying to style are behaving a particular way, then you'll be in a better position to get them to do what you want them to do with your CSS.  

Block Level Elements

By default, block level elements take up the entire width of it's parent container. After it's reached the edge of the container it'll drop below the other elements. So if you've just got a paragraph in the <body> then it will take up the entire with of the browser, unless you've set a width for the body. So, that means that even if you've got short sentences in separate paragraph tags, each paragraph will start on a new line. The image below showcases the behavior of block level elements. All the paragraphs have a green border applied so you can see how wide the elements are. Example of block level elements in the browser and in HTML A few of the most common block level elements are:
<h1>, <p>, <div>, <ul>, <ol>, <li>, <nav>, and <header>.
The Mozilla Development Network has a comprehensive list of all the block level elements, which could come in handy.  

Inline Elements

Inline elements don't start on new lines, meaning that they'll line up right next to each other on the same line if there's enough room for them. If you don't understand the different rules that apply to inline elements, your CSS can be incredibly frustrating. For example, inline elements can't take a top or bottom margins, or width or height properties. But, they can still by styled with left and right margins as well as with padding. If you didn't know the specific rules that inline elements follow, you'd surely have a headache. Often, you might just need to use a different kind of element or place your inline element within a block level element to achieve the result you seek. The image below showcases the behavior of inline elements. All the spans have a yellow border applied so you can see how wide the elements are. Examples of Inline Elements within the browser and HTML Some common inline elements are:
<span>, <a>, <em>, <code> and <button>.
Mozilla Development Network also has a list of all inline elements.  

Conclusion

HTML and CSS can be frustrating, especially if you don't understand the behaviors of elements and why different kinds of elements behave differently. For example, block elements can contain other block level elements as well as inline elements. However, an inline element can only contain inline elements. Next time you're trying to style, say a span, and you're noticing that it just won't do what you want it to do, look and see if you've accidentally put a paragraph in there. While it might seem like a paragraph can go in a span, since spans are sometimes used as containers, a paragraph is a block level element, so it doesn't belong in a span. If you need to have paragraphs in a container, why not try a div, which is a block level element. The one exception to the above rule is the anchor tag. Any element can be wrapped within an anchor tag. Block level elements can be converted to inline and inline elements can just as easily be converted to block with the display property in CSS. In general, block level elements are usually structural, while inline elements are usually text based. To learn more about block level and inline elements check out our course HTML Document Flow. You can also learn how to get a behavior using inline and block elements that's similar to floating without half as much of a headache.