Search within TutorialsPark

CSS Box Type


Use CSS display property to alter the box type for an element.


CSS Display Property

1. Any webpage is made up of boxed nested inside one another, and the way these boxes are laid out on the page depends upon elements box type.

2. With CSS display property you can alter the box type for an element, hence changing the way the element is laid out out on the webpage.

3. By default every HTML element has its default box type as one of these. block-level, inline, table-element, list-item


CSS : block-level V/S inline

Block-Level Elements Inline Elements
1. Must begin on a new line 1. Does not need to begin on a new line
2. If no width specified, the element occupies all the available space on a given line, pushing subsequent elements to the next line 2. Flows along with the content and does not occupy all the space
3.Ignores the vertical-align property 3.The vertical-align property is applicable
Eg: <p>, <h1-h6>, <pre>, <ol> <ul>, <address>, <blockquote>, <dl>, <div>, <noscript> <table>, <hr>, <form>, <fieldset> Eg: <small>, <tt>, <b>, <big> <i>, <abbr>, <cite>, <acronym>, <em>, <dfn> <kbd>, <samp>, <strong>, <span>, <var>, <a>, <bdo>, <br> <img>, <map>, <object>, <q>, <sub>, <sup> <script>, <textarea>, <label>, <select>, <button>, <input>

Demo: block-level V/S inline

Education is the best friend. An educated person is respected everywhere. Education beats the beauty and the youth.

display:

Note: In the above demo, the bordered text is an inline element <span>, we can toggle with it display from block to inline

CSS Block Level Elements

1. With display property set as block, the element always begins on a new line and occupies all the horizontal available space on that line, pushing all successive elements to next line.

Some elements like <p> , <h1-h6>, <hr> etc are block-level elements by default, but even inline elements like <span> , <imd> can be made to behave like block-level elements by altering their display property to block

Example: CSS Display - block

Give it a TRY! » Note: When the display is changed from inline to block, the element begins on a new line and occupies the complete line.


CSS Inline Level Elements

1. With display property set as inline, the element occupies space within the normal flow of the document (i.e in between the previous and succesive elements) and does not begin on a new line.

2. Inline elements have the display property as inline as default, but even block level(or any other type) elements can be made to behave like inline by setting their display property as inline

Example: CSS Display - inline

Give it a TRY! » Note: By default, <ol> is a block level element, but it behaves as inline after setting the display as inline.


CSS Display : Inline-Block

Education is the best friend. An educated person is respected everywhere. Education beats the beauty and the youth.

display:

1. With display property set as inline-block, the element gets characteristics of both inline and block level element.

2. The element is treated like a block element, but displayed like an inline element.

3. That is, the content appears alongside other content within the document flow(like inline elements), but properties like width, height and margin are applicable(like block level elements).

Example: CSS Display - inline-block

Give it a TRY! » Note: The element is displayed as an inline element, but margin and padding can be applied (possible only for block-level elements.)


CSS Display: Hidding Elements

Education is the best friend. An educated person is respected everywhere. Education beats the beauty and the youth.

display:

1. With display property set as none, no box is created for the element or its child elements and the element does not occupy a space within the page layout(i.e completely hidden).

Example: CSS Display - none

Give it a TRY! » Note: The element with display set as none is removed from the layout of the page hence hidden.