4

See my codepen here: http://codepen.io/Chiz/pen/XKBbok

1) How do I get rid of the little gaps between the red boxes? I've set padding and margin to 0 but there's still gaps.

2) In the purple box (.container), the space on the right side is more than the space on the left. I've tried to center the UL inside .container using "margin:0 auto;" but it has no effect.

Tks!

* {
  box-sizing: border-box;
}

.container
{
  border:1px solid blue;
  width:65%;
  margin:0 auto;
}

ul {
  list-style-type: none;
  border:1px solid purple;
  margin:0 auto;
}

ul li {
  display: inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  width: 10rem;
  height: 8rem;
  margin: 0;
  padding: 0;
  position:relative;
}

ul li div
{
  border:1px solid green;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  right:0;
}
<div class="container">
  <ul>
    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Home
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Plants
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Land
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Animals
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />About
      </div>
    </li>
  </ul>
</div>
Illo Yonex Illo
  • 247
  • 2
  • 6
  • [How to remove the space between inline-block elements?](http://stackoverflow.com/q/5078239/4642212) is another good dupe target. – Sebastian Simon Aug 01 '16 at 03:57

5 Answers5

1

With regard to your first question, you're encountering the natural spacing between inline-level elements. Think of the gaps as the space between words in a paragraph. When you hit the space bar between words in your code, the browser renders a space on the screen.

There are various ways to remove these gaps. One way is to remove the spaces between the inline-block elements in your code: Revised Codepen

Here's a more detailed explanation along with other solutions: https://stackoverflow.com/a/32801275/3597276

With regard to the spacing issue, the larger whitespace on the right side of the container is due to wrapping. More specifically, a container doesn't know when it's children wrap, so it doesn't automatically shrink-wrap the narrower layout.

Here are more detailed explanations and examples:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
1

1) inline-block elements display inline like text, so any space between elements will create a gap. Remove the space between <li> end and start tags, i.e. </li><li>

2) As the <li> elements are inline-block, you will need to change your margin: 0 auto; to text-align: center;

wh1tel1te
  • 51
  • 2
1
ul {
 font-size:0;
 text-align:center;
}
ul li {
 font-size:16px;
}

add the above style in your stylesheet

Praveen
  • 985
  • 8
  • 31
1

Replace the following markup over ul and ul li:

ul {
 list-style-type: none;
 border:1px solid purple;
 margin:0 auto;
 width:100%;
 text-align:center;
 padding:0;
  }

 ul li {
  display: inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  width: 10rem;
  height: 8rem;
  margin: -2px;
  padding: 0;
  position:relative;
 }
Kumar
  • 41
  • 1
  • 11
1

Try below codes, you can reduce spacing between li element either by adding float:left or margin-left. By default ul has some padding-left which you needs to set 0 or you can set it's left and right spacing by assigning padding to ul.

* {
  box-sizing: border-box;
}

.container
{
  border:1px solid blue;
  width:65%;
  height:60px;/*Added*/
  margin:0 auto;
}

ul {
  border:1px solid purple;
  margin:0;
  padding:0 48px;/*Added*/
}

ul li {
  display:inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  position:relative;
  list-style-type: none;
  margin:0px -3px;/*Added*/
  padding:10%;
}

ul li div
{
  border:1px solid green;
  position:absolute;
  transform:translateY(-50%);
  left:0;
  right:0;
}
<div class="container">
  <ul>
    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Home
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Plants
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Land
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Animals
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />About
      </div>
    </li>
  </ul>
</div>
frnt
  • 8,455
  • 2
  • 22
  • 25