Creating Padding/Margin with Bullet Points - HTML CSS CSS Property

HTML CSS examples for CSS Property:padding

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. padding

Description

Creating Padding/Margin with Bullet Points

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.lymelist li {<!--from w ww. ja  v a  2  s. c o  m-->
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat left 5px;
   font:normal 13px/19px Arial, Helvetica, sans-serif;
   color:Chartreuse;
   padding-left:24px;
   margin:6px 0;
   list-style-position:inside;
}

.lymelist li ul li {
   background:none;
   list-style:lower-alpha;
   padding-left:0;
   margin-left:21px;
   list-style-position:inside;
}

#whatsnew {
   min-height:491px;
   background:yellow;
   outline:blue solid thin;
   margin-top:16px;
   margin-right:21px
}
</style> 
 </head> 
 <body> 
  <div id="whatsnew"> 
   <div class="TitleBG"> 
    <h5>Lorem ipsu</h5> 
   </div> 
   <ul class="one_column lymelist"> 
    <p>Lorem ipsum dolor sit</p> 
    <p> <b> <u>Lorem ipsum dolor sit amet, co</u> </b> </p> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper </li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullam</li> 
    <b></b> 
    <p> <b> <u>Lorem ipsum dolor sit amet, conse</u> </b> </p> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat vol</li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor n</li> 
    <b></b> 
    <p> <b> <u>Lorem ipsum dolor sit amet, consectetur ad</u> </b> </p> 
    <li>Lorem ipsum dolor sit amet, cons<i>Lorem ipsum dolor</i>Lorem ipsum dolor sit ame</li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorpe</li> 
   </ul> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor n 
    <fontcolor="#ff0000"> 
     <fontsize="2"> 
      <a target="_blank" href="http://www.lymemd.org/pdf/LDRF_TOP_10_2013.pdf
      ">Lorem ipsum dolor sit amet, conse</a> 
     </fontsize="2"> 
    </fontcolor="#ff0000"> </p> 
  </div>  
 </body>
</html>

Related Tutorials