Inline and Block elements

Inline and Block elements | Web Development

In HTML, there are various types of elements that possess various types of properties. Among all those properties, we will discuss the display property of elements in this article that are inline and block elements.

Every element in HTML has a default display property whether it’s inline or block. On the basis of display property, HTML elements are divided into Inline Elements and Block Elements.

  • Block Elements

Elements that start with a new line and occupy the full width of the line whether it’s needed or not are block elements. they also have top and bottom margins whereas an inline element doesn’t.

Some block elements are :

<div><figure><table><hr><blockquote><fieldset>
<main><noscript><tfoot><pre><canvas><figcaption>
<header><address><nav><p><dd><form>
<footer><video><ul><li><dl><h1>-<h6>
<article><section><ol><aside><dt>

Now, let’s take an example of a block element and for this, we will put a border around the block element so that we can see whether it actually occupies the full width or not.

<!DOCTYPE html>
<html>
<body>
​
<div style="border: 1px solid black">Hello World</div>
​
</body>
</html>

Output :

  • Inline Elements

Inline Elements are those elements that don’t need a new line to start and they start from the point where the previous element has ended also they occupy the width as much as needed.

Some Inline elements are :

<span><img><object><sup><input><b>
<select><br><var><time><cite><small>
<button><map><a><abbr><kbd><dfn>
<i><acronym><output><textarea><em><strong>
<samp><sub><script><label><bdo><big><code>

Let’s now take an example of an inline element and in this also, we will put a border around the element to know how much space it actually occupies.

<!DOCTYPE html>
<html>
<body>

<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>

</body>
</html>

Output :

Hope this article will guide you to recognize all about inline and block elements that you needed and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.

This Post Has One Comment

Leave a Reply