Home / Articles / Programming languages / Markup languages / HTML & CSS / How to display inline elements as block elements and visa-versa

How to display inline elements as block elements and visa-versa

How to display inline elements as block elements and visa-versa
 
How to display inline elements as block elements and visa-versa
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (1 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


If we are not satisfied with the way a browser treats HTML elements by default we can change it.

Solution

In the picture below we force div element to display in many page elements, whereas the link is displayed as a block element.

Example

The block-level element is displayed as inline, and inline is displayed as block

This effect was achieved with the following markup code.

HTML code:

<div id="first">This div is a block level element</div>
<p>We can display div or any other element as an inline element</p>
<div id="second">This div is displayed as an inline element</div>
<p> This paragraph contains <a href="http://example.com/"> link </a> 
which is displayed as an inline element</p>
<p> This paragraph contains <a class="block" href="http://example.com/">link</a> 
which is displayed as block element</p>

CSS code:

#first {
  background-color: #CCCCCC;
  border: 1px solid #0182C4;
  padding: 4px 6px;
}

#second {
  background-color: #CCCCCC;
  border: 1px solid #0182C4;
  padding: 4px 6px;
  display: inline;
}

a {
  background-color: #0182C4;
  color: #FFFFFF;
  text-decoration: none;
  padding: 3px 5px;
}

a.block {
  display: block;
}

Explanation

Block-level elements are different from inline elements in the way that they may contain not just inline elements but also block-level elements. They also may be formatted differently: block-level elements occupy a rectangular area of the page, by default this area spans throughout the entire width of the page. On the other hand, inline elements span along lines of text, and that they would fit inside the block that contains them they wrap (automatically jumps to the next line). By default the following HTML elements are treated as block-level elements: headings (h1, h2, h3, h4, h5, h6), paragraphs (p), lists (ul, ol) and different types of containers (div, blockquote).

In the given example, div is displayed as normal - it corresponds to its type. Because it's a block-level element, it occupies the full width of the parent element, in this case, body. If it is contained within another div element, or table cell, it'll be stretch only to the width of that element.

If we want div to behave in a different way, we turn into an inline element by changing the following CSS property:

display: inline;

In the same way we can turn the inline element into block element. Note, that in the example mentioned, by default the a element is displayed as inline. The coder may want to display it as a block, for example, when we are creating the navigation bar in CSS. To get this result, we must set the display property of the element to block. In the mentioned example, the result is the blue box that contains the text is transformed in a big link that expands to the full width of the screen.


 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation