html - Where does the list-style-type : disc reflects when margin is set to 0px on li of a ul? -
consider snippet:
<ul id= "nav"> <li> <a href = "#"> home</a> </li> <li> <a href = "#"> france</a> </li> <li> <a href = "#"> italy</a> </li> <li> <a href = "#"> spain</a> </li> <li> <a href = "#"> eastern mediterranean</a> </li> <li> <a href = "#"> islands</a> </li> </ul>
the css in context:
#nav { list-style-type: disc; margin: 20px 0 0 0; padding: 0; } #nav li { margin: 10px; // if set 0, circular disc dissappear, why? border: 5px solid #ff0000 }
by default list-style-position
outside
hence if dont specify margin or padding bullets become hidden.
you can set margin of li
0px
, disc image still appear if list-style-position
inside
.
ul li { list-style-position: inside; }
read css list-style-position property.
the list-style-position property specifies if list-item markers should appear inside or outside content flow.
default value: outside
the image should understand better :
here sample jsfiddle no margin
, list-style-position
set inside
, still circular disc shows.
Comments
Post a Comment