大约 1 分钟
说明
<!DOCTYPE html>
<html>
<head>
<title>css当中的内补丁(内补白、内边距)</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
*{
padding:0px;
margin:0px;
}
#news{
width:200px;
height:200px;
border:1px solid red;
/*内补丁：直接写一个值会将四个边的补丁都打上(会将原来div的宽高改变)*/
/*padding:10px;*/
/*单独控制每一个边的内边距
padding-left:10px;
padding-top:20px;
padding-right:30px;
padding-bottom:40px;
*/
/*大招：控制4个边的内边距（上右下左）*/
/*padding:10px 20px 30px 40px;*/
/*小招：控制对边的内边距（上下、左右）*/
padding:10px 20px;
}
</style>
</head>
<body>
<h1>css当中的内补丁(内补白、内边距)</h1>
<div id="news">
<h3>头条新闻</h3>
<ul>
<li>1.新闻1</li>
<li>2.新闻2</li>
<li>3.新闻3</li>
<li>4.新闻4</li>
<li>5.新闻5</li>
<li>6.新闻6</li>
</ul>
</div>
</body>
</html>示例:
<!DOCTYPE html>
<html>
<head>
<title>会应用到padding的实例</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
ul{
list-style:none;
}
ul li{
border:1px solid red;
float:left;
padding:20px;
}
ul li:hover{
background:pink;
color:white;
}
</style>
</head>
<body>
<h1>会应用到padding的实例</h1>
<ul>
<li>首页</li>
<li>列表</li>
<li>学习</li>
<li>目录</li>
<li>详情</li>
</ul>
</body>
</html>