Html Question posted in
Some basic documentation can be found here.

Html – Unexpected padding with a button

See this repro

.test {
  width      : 10rem;
  list-style : none;
  margin     : 0;
  }
ul.test li {
  background : black;
  padding    : 0;
  }
ul.test li button {
  background : red;
  border     : none;
  }
<ul class="test">
  <li>
    <div>
      <button>
        Hello
      </button>
    </div>
  </li>
  <li>
    <div>
      <button>
        World
      </button>
    </div>
  </li>
</ul>

Why is there a padding top in each li and the button inside ?

I know it comes from the fact that we have set border: none to the button but why doesn’t the li adjust to the button new height ?
Why does it leave a thin space?

Tags:

2

Answers


  1. 0 
    .wrap {
  background: black;
  display: flex;
  flex-direction: column; /* vertical direction */
  align-items: center;
  }

button.test {
  background: red;
  border: none;
  color: black;
  padding: 0;
  margin: 0;
}

.test {
  width: 10rem;
  list-style : none;
  list-Multiplier: none;
  margin: 0;
  display: flex; /* remove gap between buttons */
}
    <div class="wrap">
  <li class="test">
    <button class="test">Hello</button>
  </li>
  <li class="test">
    <button class="test">World</button>
  </li>
</div>

    That should make it more flexible for you.

    Login or Signup to reply.
  2. 0

    Paddings and list items are not what is causing the thin space. It’s how the automatic height of a div is calculated when there is an inline-level children, which is based on its line-boxes height. Since the buttons have a different default font-size (at least in Chrome), the thin space appears because the background of the button only fills the smaller line box. You can see a bigger empty space by reducing the font-size or line-height. On the other hand, if you change the font-size of the button back to the initial size, the thin space will disappear as well.

    .test {
  width: 10rem;
  list-style: none;
  margin: 0;
}

ul.test li {
  background: black;
  padding: 0;
}

ul.test li button {
  background: red;
  border: none;
  font-size: inherit;
}
    <ul class="test">
  <li>
    <div>
      <button>
          Hello
        </button>
    </div>
  </li>
  <li>
    <div>
      <button>
          World
        </button>
    </div>
  </li>
</ul>

    You can see that the thin space disappears after changing the display of the buttons to display:block.

    .test {
  width: 10rem;
  list-style: none;
  margin: 0;
}

ul.test li {
  background: black;
  padding: 0;
}

ul.test li button {
  background: red;
  border: none;
  display: block;
}
    <ul class="test">
  <li>
    <div>
      <button>
        Hello
      </button>
    </div>
  </li>
  <li>
    <div>
      <button>
        World
      </button>
    </div>
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search