Alex Hail Alex Hail - 29 days ago 7
CSS Question

Remove space at the beginning of an unordered list when using inline-block li elements

Hi friends (and creatures of the internet), I have another question for you all today. Keep in mind I am relatively new to web design so the answer could be quite simple.

I have this social media icons list at the top left of my screen, within my navigation bar. I am using an unordered list and have the list elements using

display: inline-block;
to display my elements in a horizontal fashion.

It is working fine (for the most part) and looks like this:

enter image description here



CSS:

#topFixedNavBar .tfnb_list {
position: relative;
max-height: 32px;
margin: 0;
}

#topFixedNavBar .tfnb_list_item {
list-style-type: none;
position: relative;
display: inline-block;
width: 30px;
height: 30px;
margin: 0;
}


HTML:

<div id = "topFixedNavBar">
<div class = "tfnb_content">
<ul class = "tfnb_list">
<li class = "tfnb_list_item" id = "tfnb_list_item_facebookIcon">
<img class = "tfnb_list_item_facebookIcon_img" src="images/facebook-icon-preview.png"/>
</li>
<li class = "tfnb_list_item" id = "tfnb_list_item_youtubeIcon">
<img class = "tfnb_list_item_youtubeIcon_img" src="images/YouTube_Play.png"/>
</li>
<li class = "tfnb_list_item" id = "tfnb_list_item_instagramIcon">
<img class = "tfnb_list_item_instagramIcon_img" src="images/Instagram-logo-round.png"/>
</li>
</ul>
</div>
</div>





Except... you see that space between the left margin and the facebook icon? I have been trying to get rid of it in the most responsible way a web developer can--but simply giving the
<ul>
element a negative margin and calling it a day is not satisfying the perfectionist within me. Any help here?

Thanks

Answer

Use padding-left:0 to get rid of the space on the left in your div with class.tfnb_list

#topFixedNavBar .tfnb_list {
  position: relative;
  max-height: 32px;
  margin: 0;
}
#topFixedNavBar .tfnb_list_item {
  list-style-type: none;
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0;
}
.tfnb_list{
border:solid red;
  padding-left: 0;
}
<div id="topFixedNavBar">
  <div class="tfnb_content">
    <ul class="tfnb_list">
      <li class="tfnb_list_item" id="tfnb_list_item_facebookIcon">
        <img class="tfnb_list_item_facebookIcon_img" src="images/facebook-icon-preview.png" />
      </li>
      <li class="tfnb_list_item" id="tfnb_list_item_youtubeIcon">
        <img class="tfnb_list_item_youtubeIcon_img" src="images/YouTube_Play.png" />
      </li>
      <li class="tfnb_list_item" id="tfnb_list_item_instagramIcon">
        <img class="tfnb_list_item_instagramIcon_img" src="images/Instagram-logo-round.png" />
      </li>
    </ul>
  </div>
</div>