inline vs block html elements | block level & inline element explanation - codewithrandom

Inline vs Block html elements | block level & inline element explanation - Code with Random

inline vs block html elements | block level & inline element explanation - codewithrandom


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.


Inline Element HTML


Inline elements don't start on a new line, they only take as much width as its 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>


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.

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, standard-compliant, and avoid errors with our code.


A rule of thumb to remember, while nesting HTML tags:


  1. Both block and inline elements can be nested inside a block element

  2. Inline elements can be nested inside a block and inline element

  3. 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.



Post a Comment

Previous Post Next Post