Block Level Elements Vs Inline Elements in HTML
Every HTML web page is made up of several basic elements, known as tags. These tags are the building blocks of every HTML web page. Tags have a default way to display on a page (i.e., before they get affected by any CSS styling). Depending on their default display style, they are categorized into Block-level elements and Inline elements.
The display property specifies how an element is shown on your web page. It’s a must-know for customizing the layout of an element. There are a bunch of different values for the display property. But first, let’s go through the fundamentals.
In this blog post, we will discuss Block Level Elements Vs Inline Elements in HTML.
Inline Element HTML
Inline elements don’t start on a new line, they only take as much width as their content. They line up next to each other on the same line if there’s enough room.
Inline elements can’t take top/bottom margins or width/height properties. However, they can still be customized with padding, and left & right margins.
Some common inline elements are:
<a> <span> <em> <strong> <button> <cite> <code> <select> <time> <audio>
5+ HTML CSS Projects With Source Code
HTML Block Level Elements
A block-level element occupies the complete width of its parent container by default. It will sink below the other elements once it reaches the container’s edge.
For example, even if there is only one paragraph in the <body>, the paragraph <p> will take up the entire width of the browser. It also means that if you use separate paragraph tags for short sentences, each paragraph will begin on a new line.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Some common block-level elements are:
<p> <ul> <ol> <li> <div> <h1> <main> <header> <footer> <nav> <table>
Inline Block elements
They are the same as inline elements, except that you can set height and width values. Although it is not a default display property, it is often used to style web layouts.
Switching display properties in Html
You can change an element’s default display type, using one of these CSS properties:
display: block; display: inline; display: inline-block;
Why display type is important?
One of the reasons to learn about them is because we must know some rules related to block and inline components in order to make our code semantic, and standard-compliant, and avoid errors with our code.
50+ HTML, CSS & JavaScript Projects With Source Code
A rule of thumb to remember, while nesting HTML tags:
Both block and inline elements can be nested inside a block element
Inline elements can be nested inside a block and inline element
A block element cannot be nested inside an inline element
Another note is that the majority of block-level tags are structural, whereas inline tags are more “content-related.”
Out-of-order mixing of them can often result in undesirable visual outcomes, such as overly adjusted styling with extra CSS, etc.
ADVERTISEMENT
Thank You And Keep Learning!!!
ADVERTISEMENT
written by @ankit Joshi
ADVERTISEMENT
