Inline Vs Block Level Elements

A core concept of HTML involves inline and block level elements. Having an understanding of inline and block level elements, can help you when debugging your mark up, and save you time by writting W3C compliant HTML.

The HTML tags placed inside the body section, can be classified as one of two types of HTML elements — inline and block level. These elements have rules and display behaviours. The element’s display behaviour can be altered using the display property in CSS.

Inline Elements

Inline elements include but are not limited to…

• <a>
• <img>
• <sup>
• <span>

Nesting Rules

Inline elements can contain other inline elements, but not block level elements.

Display Behaviours

Inline elements stay on the on the same line as other inline elements and float to the left.
Inline elements only take up the amount of space the content occupies.
The width and height of inline elements can not be altered with CSS.

Block Level Elements

Block level elements include but are not limited to…

• <h1>
• <ul>
• <p>
• <div>

Nesting Rules

Block level elements can contain inline and block level elements.

Display Behaviours

Block level elements start on a new line, they create a line break before and after the content of the element.
Block level elements use 100% of the width avalible within its parent’s element.
The width and height of block level elements can be altered with CSS.

CSS Display Property

You can alter an element’s behaviour using CSS, although the element’s original rules still apply. If you want an <p> tag to behave like an inline element you could use the display property in CSS.
Here is an example below

p{
display:inline;
}

The <p> tag would now behave as if it was an inline element. It would float to the left and be inline with any inline elements which are directly before or after it. The <p> tag can still contain other block level elements.

Here is another example but this time we want an <a> tag to behave like a block level element, so that we can alter a width and height of the element.

a{
display:block;
width:100px;
height:100px;
}

The content of the <a> tag would now behave as if it was a block level element. It will have a line break before and after it. It would take up the full width of it’s parent element, but not this case as we’ve declared the width and height to be 100px.

If you’ve found this useful, the best way to say thanks is by sharing this post via one of the social buttons below.