框模型

by cyning sun

HTML

<UL>
    <LI>First element of list</LI>
    <LI class="withborder">Second element of list is a bit longer to illustrate wrapping.</LI>
</UL>

CSS

UL {
       width:260px;
       background: yellow;
       margin: 12px 12px 12px 12px;
       padding: 3px 3px 3px 3px;
       /* No borders set */
   }
   LI {
       color: white;
       /* text color is white */
       background: blue;
       /* Content, padding will be blue */
       margin: 12px 12px 12px 12px;
       padding: 12px 0px 12px 12px;
       /* Note 0px padding right */
       list-style: none
       /* no glyphs before a list item */
       /* No borders set */
   }
   LI.withborder {
       border-style: dashed;
       border-width: medium;
       /* sets border width on all sides */
       border-color: lime;
   }