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/ >
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/ >
Thats how CSS ‘display’ property works.
Santosh Viswanatham 