Why Does Floating Inside Div Behave Like That

Question

I was trying to create a horizontal navbar using lists inside a container div, I came across confusing things.

When I try to place elements next to each other, if I dont use float at all, there is a gap between list items, but margin and padding wise it is fine.

body {
  margin: 0px;
  padding: 0px;
}

div {
  text-align: center;
  background-color: gray;
  margin: 0px;
  padding: 0px;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

ul li {
  display: inline-block;
  color: white;
  background-color: blue;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="container">
  <ul>
    <li>Home</li>
    <li>Youtube</li>
    <li>Contact</li>
    <li>Support</li>
  </ul>

When I use float: left; there is an unwanted padding in div or margin on list.

body {
  margin: 0px;
  padding: 0px;
}

div {
  text-align: center;
  background-color: gray;
  margin: 0px;
  padding: 0px;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

ul li {
  display: inline-block;
  float: left;
  color: white;
  background-color: blue;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="container">
  <ul>
    <li>Home</li>
    <li>Youtube</li>
    <li>Contact</li>
    <li>Support</li>
  </ul>

To solve that, I used font-size: 0px and font-size: 16px for <ul>. That solved my problem but I don't know if it's right thing to do and more importantly what causes the problem there.

body {
  margin: 0px;
  padding: 0px;
}

div {
  font-size: 0px;
  text-align: center;
  background-color: gray;
  margin: 0px;
  padding: 0px;
}

ul {
  font-size: 16px;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

ul li {
  display: inline-block;
  float: left;
  color: white;
  background-color: blue;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="container">
  <ul>
    <li>Home</li>
    <li>Youtube</li>
    <li>Contact</li>
    <li>Support</li>
  </ul>

Is it bad to use list items as navigation bars or I am using it wrong? I am curious what causes that gap at the bottom of the list.

in the second case don't use font-size, adjust the vertical-align like suggested/explained in the duplicate. For the first snippet it's the comming case of space between inline-block (check the second duplicate) — Temani Afif, Feb 12 '20 at 18:44
@TemaniAfif Thanks so much but there is one thing I didn't fully understand. When not using float, we didn't have to vertical align list, but in the other case where list items were floated, there is a gap which can be fixed by vertical align. Why is there a difference? — alexmoran, Feb 12 '20 at 20:09
the default vertical-align is the baseline. With float the basline is the bottom of your element so we need space under it (like the image in the duplicate). Without float the baseline is different and is based on the text inside. Add `overflow: auto;` to your first snippet to the li and you will have the same behavior because we changed the baseline to make it the bottom like with float. — Temani Afif, Feb 12 '20 at 20:13
check this: https://stackoverflow.com/q/9273016/8620333 .. it will help you understand how to identify baseline of an elements — Temani Afif, Feb 12 '20 at 20:16
@TemaniAfif Sorry if it's too silly but why did floating change baseline? I mean isn't there some list items in both situations? — alexmoran, Feb 12 '20 at 20:19
Well this isn't silly but rather a bit tricky to explain. Float are block level element so they don't contribute to inline formatting context thus the baseline of the ul (the inline-block) is it's bottom. without float the baseline of the ul is the basline of the inline element inside it (the inline-block li) and this baseline is based on the text. I know it's a bit tricky but refer to the link I shared to better understand — Temani Afif, Feb 12 '20 at 20:29
Okay, it's clearer in my mind now. I will check that link too, thanks again. — alexmoran, Feb 12 '20 at 21:29

score 0 · Answer 1 · answered Feb 12 '20 at 17:52

Is it bad to use list items as navigation bars?

Definitely not! That's the most common way to do it.

If I don't use float at all, there is a gap between list items

I still think that your first variant, using only inline-block and no float, is the best one.

The spaces between the elements are caused by the spaces (indents) in your HTML code between the li elements. You can either remove them by putting all of the li elements on one line in your code, or by putting the space between them in a comment, as I prefer to do and have demonstrated below:

body {
  margin: 0px;
  padding: 0px;
}

div {
  text-align: center;
  background-color: gray;
  margin: 0px;
  padding: 0px;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

ul li {
  display: inline-block;
  color: white;
  background-color: blue;
}

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" type="text/css" href="myStyle.css">

  <title>Title</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

  <div class="container">
    <ul>
      <li>Home</li><!--
   --><li>Youtube</li><!--
   --><li>Contact</li><!--
   --><li>Support</li>
    </ul>

</body>

</html>

Why Does Floating Inside Div Behave Like That

1 Answers1