Alone in the universe Alone in the universe - 3 months ago 7
CSS Question

<span> and <ul> vertical alignment

I have a

<span>
element followed by a horizontal
<ul>
element. Why is there a left and bottom margin on the
<ul
>? How can I remove this space?

jsfiddle

HTML

<span>AAAAA</span>
<ul>
<li>BBBBB</li>
<li>CCCC</li>
</ul>


CSS

body {
background-color: #000;
margin: 0;
padding: 0;
}

span {
background-color: #f00;
}

ul {
background-color: #0f0;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}

ul > li {
float: left;
padding-right: 1em;
}

Answer

Check this out!

Added inline-block to the span and vertical-align too. The span has a visual margin / space because it is not inline-block and the ul next to it but is inline-block

Is this what you expected? Please let me know your feedback on this. Thanks!

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}
span {
  background-color: #f00;
  display: inline-block;
  vertical-align: top;
}
ul {
  background-color: #0f0;
  display: inline-block;
  vertical-align: top;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul > li {
  float: left;
  padding-right: 1em;
}
<span>AAAAA</span>
<ul>
  <li>BBBBB</li>
  <li>CCCC</li>
</ul>