Difference between css property Float:right and display:inline - block. In both the cases we can increase both the height and width. But what’s the actual Difference between in them ?
Hello @hsbehera5 ,
We have recieved your query.
This was a really nice question which you have asked.
Give us a couple of minutes & we will reach out with the solution for your query
Zeba Kainat| TA- Edyoda
3 Likes
- Display:inline-block puts a particular space between two Display:inline-block elements, if not written continually. Whereas Float never put any space between two elements of its kind.
- Float floats elements to left with float:left and to right with float:right. So not possible to horizontally center align any floated elements. Display:inline-block never floats so by using a text-align:center on its parent div one can easily achieve horizontally center align elements.
- Floated elements are like separate entities which have lesser concern with another floated entity content, so we cannot vertically align floated elements. Display:inline-block elements are treated as inline elements so vertical-align property works absolutely fine with them and it can be use to create fabulous entities in a page.
For a good example while creating ‘listing in grid’ if our elements have uneven heights, then a better way to display it is display:inline-block with vertical-align:top; float will produce haphazard result there.
3 Likes