Why we convert inline elements into block level elements

HTML & CSS
1

Please tell the advantage of converting inline elements into block and vice versa, using the property display:block & display inline. I mean what is the reasons behind this conversion.

2

Hi @Piyush1,

Welcome to the forum.

One reason that springs to mind is that inline elements do not have widths or heights.

3

The first thing you should know is that CSS doesn’t really care what the element is supposed to do (apart from some elements like form controls) and therefore you can change the display of the element to suit your design.

This does not mean that you can convert an inline element into a block element at all. What you do is change the display:property of the element from display:inline to display:block. This does not make it a block element but makes it display as a block element.

I hope the subtle distinction is clear as the rules of HTML cannot be changed and structure must always come first.

There are many reasons why you would want to this and most are so that you can style the elements to fit in with your design.

For example you may have a simple semantic structure like this.

<p>This is a paragraph with some <em class="warning">emphasised</em> text that I am going to style to fit in with my design.</p>



   .warning{
    	display:block;
    	background:red;
    	width:50%;
    	min-width:300px;
    	padding:20px;
    	margin:10px auto;
    	text-align:center;
    	font-size:18px;	
    }

Once you turn the element into a block element then width, height, padding and dimensions can be applied (width and height do not apply to inline elements and vertical margins and padding have no effect on the line-height or surrounding elements).

In the example above that allows us to style a semantic structure correctly without having to use a div instead of the em.

HTML is the structure of the page and must follow the rules of html and then you style it with css to match your design.

1 Like
4

Thank you john. I get it 80%.

1 Like
5

@PaulOB so the main purpose is tha to set padding, heights, widths. thank you paul,

6

just use a inline element when u need an inline element
when u need a blocklevel element just use a block level element
everytime u see yourself converting a inline to block level and vice versa i think its because u are using the wrong element

7

Semantics don’t always allow for this approach.

8

No, you have it completely wrong I’m afraid.

You must use the correct html element for the job in hand and if you look at my example above it is precisely clear why you cannot possibly have a block element in that situation.

HTML is abut structure so you use the mark up the content deserves, which means using the most semantic elements for the job in hand according to the rules of html. CSS then handles the presentation which may mean changing the display property to suit the design you want to achieve.

Never choose an html element just for the way it looks.

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.