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
Post a Comment