0

I haven't been able to get rid of the the extra whitespace within the button that is nested within the LI. Can anyone explain what it is the best way to get rid of it? I've tried changing the button's height and line-height to no effect. Not sure what else to do.

The button is supposed to sit in the upper-right corner and the dots are supposed to be vertical instead of horizontal [hence the CSS rotate()].

Codepen

<style>
ul, li {
  margin:0; 
  padding:0; 
  list-style:none
}

li {
  display:inline-block; 
  padding: 12px;
  position:relative; 
  background-color:#d5d5d5
}

h3 {
  padding:0;
  margin:0 0 12px 0;
}

address {
  font-style:normal;
}

li > button {
  position:absolute; 
  top:0; 
  right:0;
  transform: rotate(90deg);
  display:flex;
  flex-flow:column nowrap;
  background-color:transparent;
  border: 1px solid #000;
  padding:0;
  margin:0;
  font-size:2em;
  cursor:pointer;
}
</style>


<ul>
  <li>
    <h3>My House</h3>
    <address>
      123 Main St<br>
      Long Beach, MS 39560
    </address>
    <button>&#x2026;</button>
  </li>
</ul>
RobbieS
  • 120
  • 12
  • The button's height is larger than its width. So the rotate causes it to overflow. Setting width and height to 40px seems to fix it. – Rick Hitchcock Jan 30 '20 at 22:14
  • The whitespace is caused by the font-size. The three dots are aligned to the text baseline, and so the space above is where a character would traditionally sit. – fubar Jan 30 '20 at 22:15

1 Answers1

0

It's caused by the font-size in combination of te line height. To fix this add the following to the button style:

  line-height: 0.3em;
  padding-bottom: 17px;
Kappa
  • 193
  • 1
  • 2
  • 13