CODEWITHSUNDEEP
htmlcss
The Codesee
The Codesee

Reputation: 3783

Setting div to automatically fit it's content using display: inline-block - unexpected space

I'm using display: inline-block to make a div automatically expand to fit it's content. However, there seems to be an unexpected green space in the div (with an arrow pointing to it):

enter image description here

To rectify this, I attempted to add margin: 0; to the li elements, however the issue still occurs.

ul {
 list-style: none;
 margin: 0px;
}
li {
 width:100px;
 float: left;
 background: red;
 margin: 0;
}
<div style="background: green; display: inline-block;">
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</div>

JsFiddle: https://jsfiddle.net/8xz0sze6/

Upvotes: 0

Views: 43

Answers (3)

Adnan Akram
Adnan Akram

Reputation: 641

<ul> take padding on left side by default reset it and every thing will be fine 

ul {
 list-style: none;
 margin: 0px;
  padding: 0;
}
li {
 width:100px;
 float: left;
 background: red;
 margin: 0;
}
<div style="background: green; display: inline-block;">
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</div>

Upvotes: 1

Justinas
Justinas

Reputation: 43479

List elements uses padding to increase indentation so use padding: 0

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  width: 100px;
  float: left;
  background: red;
  margin: 0;
}
<div style="background: green; display: inline-block;">
  <ul>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
  </ul>
</div>

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

By default <ul> tag has padding from left and here you have defined green background to outer div thats why its showing space because there is default padding in <ul>

Add padding:0px in <ul>

ul {
 list-style: none;
 margin: 0px;
 padding:0px;
}

Upvotes: 3

Related Questions