-->

CSS Display Tutorial

With the display properties, block level elements can be made inline and inline elements can be made block level. Also with these properties the element can be kept invisible. Basically 3/4 of its values ​​are used a lot, the rest of the values ​​also do a lot of work but are used less.

.navigation a {display: block; margin-left: 0.5em; padding: 5px; border: 1px solid # 000; color: # 000; text-decoration: none;



See application

<! DOCTYPE html>
<head>
<style type = "text / css">
.navigation a
display: block;
margin-left: 0.5em;
padding: 5px;
border: 1px solid # 000;
color: # 000;
text-decoration: none;
</style>
</head>
<body>
<ul class = "navigation">
<a href="#"> Home </a>
<a href="#"> About Us </a>
<a href="#"> Contact </a> </li>
</ul>
</body>
</html>


display: inline; See (this is the default) all a or anchor tags will show up at once. Anchor is the (<a> </a>) inline element. display: block; It works like a block level element. These properties can be used to level blocks such as <span>, <em> etc. inline elements or any inline elements.



Again, block level elements like <p>, <li>, etc., which have the full width of the browser and are given line breaks before and after, to make them work like inline display: inline; You have to do it. E.g.

p {display: inline;


See how p works like an inline element. The display has another value, such as "none", which will hide that element and hold no space. Working with jQuery, form validation, etc., it is necessary to keep the element invisible in this way.

In the example above display: inline; In place of display: none; Look no further.

inline-block (display: inline-block) has a value that will work the same as inline, the only difference being that height and width will now work for the element. Normally, height and width of inline elements do not work.

display: table; The element will behave like a table (<table> </table>).

display: table-cell; Element T will work like <td> </td>.

Adding a table-row will work like <tr> </tr>.

There are more like this, you can try it.


display: inline-table;
display: list-item;
display: table-caption;
display: table-column-group;
display: table-header-group;
display: table-footer-group;
display: table-row-group;
display: table-column;
display: run-in;
display: flex;
Facebook Comments

Follow by Email