1

I was used to using floats for creating layouts but today i realized inline block can also be used for the same purpose. This is the html

<div class="col">

</div>
<div class="col">

</div>
<div class="col">

</div>

I am wondering what is the difference between using inline block and float in creating 3 columns layout.

Using float

.col {
  border: 1px solid black;
  width: 30%;
  float:left;
  height: 200px;
}

Using inline block

.col {
  border: 1px solid black;
  width: 30%;
  display: inline-block;
  height: 200px;
}

Apart from a slight margin when using inline block they seem identical. Is there a recommended way on whether to use float or inline block in order to create layouts such as this? I appreciate any help to this dilemma. Thanks!

kofhearts
  • 3,607
  • 8
  • 46
  • 79
  • A trivial difference: you can center inline-block but you cannot center float. There is more and more difference so it's not a matter of preference or recommendation. It depend on what you want to do. – Temani Afif Mar 16 '20 at 12:36

1 Answers1

-1

“inline-block” deletes the “block” characteristic of the div, and the “float” moves the “div”. the difference is what you want to do with the div. if you just want to put them in one line, then use "inline-block". You can even use "diplay: flex" for beauty.

FuadFarhadoghlu
  • 33
  • 13