CSS ‘display’ property

Imagine you have a parent ‘div’ with 200px*200px and 4 child ‘div’ elements with 50px*50px then how do you fit these child ‘div’ elements in the parent div? If you started working with css and you have a little knowledge about ‘display’ then you would suggest to use ‘inline’ property.

Few important and basic ‘display’ property values are inline, block, inline-block.

‘block’ will make the element appear as a block element which means it starts on new line and takes the full width of the available. eg: h1-h6, p, div elements.

‘inline’ will allow other elements to occupy in the same line if any space is left. eg: span, a elements etc.

‘inline-block’ elements are inline elements but they have width and height.

Now lets get back to our question, We cannot use ‘inline’ since the div elements have no content so we will use ‘inline-block’ to solve it. Hopefully it should work since ‘inline’ property will enable them to be beside each other and ‘block’ gives them width and height. Here is what we get.< https://embed.plnkr.co/5M7Qgp3o4YkrTunwxdLd/ >

display-demo-2

You will see a white space between the div’s and you will find many explanations for this gap. It is the general white space between the elements. To remove this space we will use the ‘float’ property and let the elements float to the left. and Yipee it works. Here goes the final code.< https://embed.plnkr.co/6PKsgDBTkvP1UloM7tt0/ >

display-demo-2

Thats how CSS ‘display’ property works.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s