CSS Layout Control

CSS Layout Control
Nikhil
Published on 2021-07-08 16:12:53

CSS Layout Control Value Effect


  • none - Hide the element and prevent it from occupying space.
  • block - Block element, occupy 100% of the available width, break after element.
  • inline - Inline element, occupy no width, no break after element.
  • inline-block - Taking special properties from both inline and block elements, no break, but can have width.
  • inline-flex - Displays an element as an inline-level flex container.
  • inline-table - The element is displayed as an inline-level table.
  • grid - Behaves like a block element and lays out its content according to the grid model.
  • flex - Behaves like a block element and lays out its content according to the flexbox model.
  • inherit - Inherit the value from the parent element.
  • initial - Reset the value to the default value taken from behaviors described in the HTML specifications or from the browser/user default stylesheet.
  • table - Behaves like the HTML table element.
  • table-cell-  Let the element behave like a <td> element
  • table-column - Let the element behave like a <col> element
  • table-row - Let the element behave like a <tr> element
  • list-item - Let the element behave like a <li> element.

 

The display property


The display CSS property is fundamental for controlling the layout and flow of an HTML document. Most elements have a default display value of either block or inline (though some elements have other default values).

Inline

An inline element occupies only as much width as necessary. It stacks horizontally with other elements of the same type and may not contain other non-inline elements

<span>This is some <b>bolded</b> text!</span>

output:

This is some bolded text!

As demonstrated above, two inline elements, <span> and <b>, are in-line (hence the name) and do not break the flow of the text.

Block

A block element occupies the maximum available width of its' parent element. It starts with a new line and, in contrast to inline elements, it does not restrict the type of elements it may contain.

<div>Hello world!</div><div>This is an example!</div>

output:

Hello, world!
This is an example!

The div element is block-level by default, and as shown above, the two-block elements are vertically stacked and, unlike the inline elements, the flow of the text breaks.

Inline Block

The inline-block value gives us the best of both worlds: it blends the element in with the flow of the text while allowing us to use padding, margin, height, and similar properties which have no visible effect on inline elements.

Elements with this displayed value act as if they were regular text and as a result are affected by rules controlling the flow of text such as text-align. By default, they are also shrunk to the smallest size possible to accommodate their content.

CSS

<!--Inline: unordered list-->
<style>
li {
display : inline;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>

HTML

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

output:

layout css

CSS

<!--block: unordered list-->
<style>
li {
display : block;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>

HTML

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

output:

layout tutorial

CSS

<!--Inline-block: unordered list-->
<style>
li {
display : inline-block;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>

HTML

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

output:

layout css

none

An element that is given the none value to its display property will not be displayed at all.

For example, let's create a div-element that has an id of myDiv:

<div id="myDiv"></div>

This can now be marked as not being displayed by the following CSS rule:

#myDiv {
display: none;
}

When an element has been set to be displayed:none; the browser ignores every other layout property for that specific element (both position and float). No box will be rendered for that element and its existence in HTML does not affect the position of the following elements.

Note that this is different from setting the visibility property to hidden. Setting visibility: hidden; for an element would not display the element on the page but the element would still take up space in the rendering process as if it would be visible. This will therefore affect how the following elements are displayed on the page.

The none value for the display property is commonly used along with JavaScript to show or hide elements at will, eliminating the need to actually delete and re-create them.

To get old table structure using div

This is the normal HTML table structure

CSS

<style>
table {
width: 100%;
}</style>

HTML

<table>
<tr>
<td>
I'm a table
</td>
</tr>
</table>

You can do same implementation like this

CSS

<style>
.table-div {
display: table;
}
.table-row-div {
display: table-row;
}
.table-cell-div {
display: table-cell;
}
</style>

HTML

<div class="table-div">
<div class="table-row-div">
<div class="table-cell-div">
I behave like a table now
</div>
</div>
</div>

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website