Display property in CSS

How to display elements in CSS

Each and every element we write in HTML is displayed in the web page and takes its space. Each element has its own display property but we can control the same using CSS rules.

Block level elements

Elements like paragraph <p>, div <div> are block elements having default display value as block. Block elements takes up horizontal space as much as possible. They always fall in a new line stacked one below the other. They can contain block or inline elements and can be even wrapped inside an inline element. You can specify width and height to block level elements. Common elements listed below are block level elements.

                       i.   <div>

                      ii.   <ul>,<ol>,<dl>

                     iii.   <h1>...<h6>

                    iv.    <p>

                     v.    <form>

                    vi.    <li>,<dt>,<dd>

                   vii.    <table>

                 viii.     <blockquote>

                    ix.    <pre>

 

p{
display : block;
}

Inline elements

Inline elements like <span>, <em> do not fall into a new line and they sits with the flow of the document. They do not take whole space like block elements and take as much space as required only. Width and height cannot be applied. Margin and padding values can be applied to inline elements.  Few inline elements are <span>, <br>,<em>,<a>,<abbr>,<acronym>.

 

p{

display : inline;

}

Inline-block elements

Inline-block is the way to make elements inline but preserving the block element capabilities like setting top and bottom margin & padding, setting width and height.., etc. All the properties that of block elements will be applicable but they will not fall into a single line.

Inline-block element is useful when we want to have small blocks flowing from left-right, top-bottom like regular text but still have them as blocks. Inline block elements may not touch each other and may maintain a small gap between elements. They may not be displayed against each other in few cases where we can control using CSS.

p{

display : inline-block;

}

None

display: none can be applied if the elements need not be displayed and appear to be not existing in the html web page.  Nested elements within elements of display:none are also hidden.