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> 

enter image description here

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 :

list style property explanation

here sample jsfiddle no margin , list-style-position set inside , still circular disc shows.


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -