WEB前端

css padding 不占外面空间大小的方法

位置:首页 > WEB前端 > css教程,2019-08-08 15:15
今天做一个ul li的ui,发现li 使用了padding,变大了,在原有的宽度上加上了padding的大小。其实css padding 是可以不占外面空间的。加上box-sizing:border-box; 就可以了。

今天做一个ul li的ui,发现li 使用了padding,变大了,在原有的宽度上加上了padding的大小。其实css padding 是可以不占外面空间的。加上box-sizing:border-box; 就可以了。

css padding 占外面空间

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css padding 占外面空间</title>
<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
ul {
  list-style: none;
 
}
.clear{clear:both;}

/*产品*/
.pro-list{width:1200px;margin:auto;margin-top:50px;}
.pro-list li{position:relative;float:left;width:286px;height:349px;border:1px solid #eee;margin:0 14px 7px 0;margin-top:10px;transition:all .5s;display:inline;}
.pro-list li.end{margin-right:0}
.pro-list li:nth-child(4n){margin-right:0}
.pro-list li:after{content:'';width:0;height:3px;margin:0 auto;background:url(pro-bg.png) no-repeat;position:absolute;left:0;right:0;bottom:0;transition:all .5s}
.pro-list li:hover{border:1px solid #c7e6fb;box-shadow:0px 8px 20px rgba(0,0,0,.15);}
.pro-list li:hover:after{width:100%;}
   </style>

</head>
<body>
<ul class="pro-list">

                <li>
                    
                </li>
                 <li>
                    </li>
					<li></li>
				 <li class="end"></li>

                   <div class="clear"></div>            
            </ul>

</body>
</html>
下面是 css padding 不占外面空间

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css padding 占外面空间</title>
<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
  box-sizing:border-box;
}
ul {
  list-style: none;
 
}
.clear{clear:both;}

/*产品*/
.pro-list{width:1200px;margin:auto;margin-top:50px;}
.pro-list li{position:relative;float:left;width:286px;height:349px;border:1px solid #eee;margin:0 14px 7px 0;margin-top:10px;transition:all .5s;display:inline;}
.pro-list li.end{margin-right:0}
.pro-list li:nth-child(4n){margin-right:0}
.pro-list li:after{content:'';width:0;height:3px;margin:0 auto;background:url(pro-bg.png) no-repeat;position:absolute;left:0;right:0;bottom:0;transition:all .5s}
.pro-list li:hover{border:1px solid #c7e6fb;box-shadow:0px 8px 20px rgba(0,0,0,.15);}
.pro-list li:hover:after{width:100%;}
   </style>

</head>
<body>
<ul class="pro-list">

                <li>
                    
                </li>
                 <li>
                    </li>
					<li></li>
				 <li class="end"></li>

                   <div class="clear"></div>            
            </ul>

</body>
</html>
不同地方是css部分多加了,就可以不占用外部空间了。
box-sizing:border-box;

TAGS:css padding 不占外面空间

猜你喜欢

NewHot