html - mysterious margin for nav dots -


i have created simple dot navigation on site banner here. html code have used follows:

<ul class="carousel-dots">     <li>         <a href=""></a>     </li>     <li>         <a href=""></a>     </li>     <li class="active">         <a href=""></a>     </li> </ul> 

now <li> element have following code:

.banner ul.carousel-dots li {     height: 13px;     width: 13px;     display: inline-block;     background: url(../img/res/carousel-dots.png) 0 0 no-repeat;     margin: 0;     cursor: pointer; } 

now though have margin: 0; in style, margin between left , right, don't know these spaces coming , want dots touching each other , side side. whats causing mysterious margin ?

white space between inline-block elements?

the space created "enter" between elements.

how remove space between inline-block elements?

in question above there lot of different answers how remove it.
set parent element font-size 0.

ul {    font-size: 0;  }  ul.carousel-dots li {    height: 13px;    width: 13px;    display: inline-block;    /*background: url(../img/res/carousel-dots.png) 0 0 no-repeat;*/    background-color: black;    border-radius: 50%;    margin: 0;    cursor: pointer;  }
<ul class="carousel-dots">    <li>      <a href=""></a>    </li>    <li>      <a href=""></a>    </li>    <li class="active">      <a href=""></a>    </li>  </ul>


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -