박스 margin 중복 처리

log 2015. 5. 1. 14:01

html

<div class="wrapper">    
  <ul>        
    <li>1</li>        
    <li>2</li>        
    <li>3</li>        
    <li>4</li>    
  </ul>
</div>

예제2

ul {position:relative; left:-10px; top:-10px; width:220px;}
li {float:left; width:100px; height:80px; background:#e4e4e4; margin:10px 0 0 10px;}

예제2

.wrapper { width: 210px; overflow: hidden; border:1px solid blue;}
.wrapper ul { width: 220px;  overflow: hidden; border:1px solid red;}
.wrapper li {width: 100px; height:80px; background:#e4e4e4; float: left; margin: 0 10px 10px 0; }

예제3

ul {width:220px; height:180px; padding:5px 5px;}
li {float: left; width: 100px; height:80px; background:#e4e4e4; margin:5px 5px; }