Conquer CSS by Understanding Inline and Block Level Elements
Block Level ElementsBy 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. 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 ElementsInline 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. Some common inline elements are:
<span>, <a>, <em>, <code> and <button>.Mozilla Development Network also has a list of all inline elements.