CODEWITHSUNDEEP
htmlcss
Alex H.
Alex H.

Reputation: 89

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

Upvotes: 1

Views: 523

Answers (2)

repzero
repzero

Reputation: 8412

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>

Upvotes: 2

jafarbtech
jafarbtech

Reputation: 7015

For ul give style like

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

Upvotes: 1

Related Questions