padding:内容和边框之间的距离
设置padding宽度后,会发生在原有基础上发生扩张,背景颜色与div盒子的background-color相同。
<!-- 内边距(padding):内容和边框之间的距离 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:100px;
height: 100px;
background-color: red;
border: 1px solid #000;
}
/* 设置padding后,宽高改变,因为内容宽高不变,加上padding后扩张
且背景颜色和内容background-color一样 */
.box1{
padding-top: 20px;
}
.box2{
padding-right: 40px;
}
.box3{
padding-bottom: 80px;
}
.box4{
padding-left: 160px;
}
.box5{
paddi