
What is the CSS display property?
Well, according to w3schoolsThe display property specifies the type of box used for an HTML element.Well, in simple terms this means that using this CSS property we cant control the layout of an HTML element(or its rectangular box to be precise). The most common values for the display property are:
1 2 3 4 |
display:block; /*Sits in the next line*/ display:inline; /*Sits in the same line*/ display:inline-block; /*Combines both block and inline*/ display:none; /*Used to hide the element*/ |
Display:block;
A block-level element starts on a new line and takes up as much horizontal space as it can. For example: The User Agent stylesheet sets some elements as block level elements like h1,div,p etc. Consider this piece of code:
1 |
Some text here.<span style="display:block;color:rgb(255, 0, 31);">Notice this text on the next line.</span>Some more text!! |
DEMO
Some text here.Notice this text on the next line.Some more text!!
Display:inline;
This is the default value for every element. An inline element sits in the same line, i.e. it doesn’t force itself to be in the next line.You can not set the width/height of these elements, they will take only as much space as is required to fit the contents of the element. For example:
1 |
Some text here. <h1 style="display:inline;width:1024px;" >Notice this on the same line.</h1> Some more text here!! |
DEMO
Some text here. Notice this on the same line.
Some more text here!!Display:inline-block;
As the name suggests, this property-value combines the best of both display:block; and display:inline-block;. An inline-block element will be rendered on the same line and you can even specify the width/height etc for such elements. This is perfect for making grid-like designs. For example:
1 2 |
<label style="width:100px;display:inline-block;" >Small:</label><input type="text" /><br> <label style="width:100px;display:inline-block;" >Big ass label:</label><input type="text" /> |
DEMO
Display:none;
This is pretty simple, if you want to hide an element from the visible DOM, then you set its CSS as: display:none;. This is perfect for transitions.There are more values that can be used for the display property but they are rarely used. Thank you for reading and don’t forget to share!
Follow Us