8 外边距和内边


margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离;
Border(边框) 围绕在内边距和内容外的边框。
Content(内容) 盒子的内容,显示文本和图像。
元素的宽度和高度:
Remark重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。.
margin:10px 5px 15px 20px;-----------上 右 下 左 margin:10px 5px 15px;----------------上 右左 下 margin:10px 5px;---------------------上下 右左 margin:10px; ---------------------上右下左
下面的例子中的元素的总宽度为300px:
width:250px; padding:10px; border:5px solid gray; margin:10px;
练习: 300px*300px的盒子装着100px*100px的盒子,分别通过margin和padding设置将小盒子 移到大盒子的中间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
background-color: aqua;
width: 300px;
height: 300px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>
</body>
</html>
修改css_attribute.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
p{
/*color: rgb(125,200,40);*/
/*color: rgba(255,0,0,1);*/
font-size: 45px
}
p{
font-style: italic;
}
p{
font-family: "Times New Roman";
}
p{
font-weight: lighter;
}
#div1{
height: 600px;
background-color: rebeccapurple;
background-image: url("12.jpg");
background-repeat: no-repeat;
background-size: 100px 100px;
/*background: url("12.jpg") no-repeat 100px 100px red;*/
}
</style>
</head>
<body>
<!--<p>hello p</p>-->
<div id="div1"></div>
</body>
</html>
点击pycharm上面浏览器

修改css_attribute.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
p{
/*color: rgb(125,200,40);*/
/*color: rgba(255,0,0,1);*/
font-size: 45px
}
p{
font-style: italic;
}
p{
font-family: "Times New Roman";
}
p{
font-weight: lighter;
}
#div1{
height: 600px;
background-color: rebeccapurple;
background-image: url("12.jpg");
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: center;
/*background: url("12.jpg") no-repeat 100px 100px red;*/
}
</style>
</head>
<body>
<!--<p>hello p</p>-->
<div id="div1"></div>
</body>
</html>
点击pycharm上面浏览器

修改css_attribute.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
p{
/*color: rgb(125,200,40);*/
/*color: rgba(255,0,0,1);*/
font-size: 45px
}
p{
font-style: italic;
}
p{
font-family: "Times New Roman";
}
p{
font-weight: lighter;
}
#div1{
height: 300px;
background-color: rebeccapurple;
background-image: url("12.jpg");
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: center;
/*background: url("12.jpg") no-repeat 100px 100px red;*/
}
</style>
</head>
<body>
<!--<p>hello p</p>-->
<div id="div1"></div>
</body>
</html>
点击pycharm上面浏览器

修改css_attribute.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
p{
/*color: rgb(125,200,40);*/
/*color: rgba(255,0,0,1);*/
font-size: 45px
}
p{
font-style: italic;
}
p{
font-family: "Times New Roman";
}
p{
font-weight: lighter;
}
#div1{
height: 300px;
background-color: rebeccapurple;
background-image: url("12.jpg");
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: center center;
/*background: url("12.jpg") no-repeat 100px 100px red;*/
}
</style>
</head>
<body>
<!--<p>hello p</p>-->
<div id="div1"></div>
</body>
</html>
点击pycharm上面浏览器
修改css_attribute.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
p{
/*color: rgb(125,200,40);*/
/*color: rgba(255,0,0,1);*/
font-size: 45px
}
p{
font-style: italic;
}
p{
font-family: "Times New Roman";
}
p{
font-weight: lighter;
}
#div1{
height: 300px;
background-color: rebeccapurple;
background-image: url("12.jpg");
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: left center;
/*background: url("12.jpg") no-repeat 100px 100px red;*/
}
</style>
</head>
<body>
<!--<p>hello p</p>-->
<div id="div1"></div>
</body>
</html>
点击pycharm上面浏览器

修改css_attribute.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
p{
/*color: rgb(125,200,40);*/
/*color: rgba(255,0,0,1);*/
font-size: 45px
}
p{
font-style: italic;
}
p{
font-family: "Times New Roman";
}
p{
font-weight: lighter;
}
#div1{
height: 300px;
background-color: rebeccapurple;
background-image: url("12.jpg");
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: top center;
/*background: url("12.jpg") no-repeat 100px 100px red;*/
}
</style>
</head>
<body>
<!--<p>hello p</p>-->
<div id="div1"></div>
</body>
</html>
点击pycharm上面浏览器

用pycharm新建box_model.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height: 200px;
background-color: rebeccapurple;
}
.div2{
height: 200px;
background-color: green;
}
.div3{
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
点击pycharm上面浏览器

修改box_model.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height: 200px;
width: 30%;
background-color: rebeccapurple;
}
.div2{
height: 200px;
width: 20%;
background-color: green;
}
.div3{
height: 50%;
width: 20%;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
点击pycharm上面浏览器

修改box_model.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height: 200px;
width: 30%;
background-color: rebeccapurple;
}
.div2{
height: 200px;
width: 20%;
background-color: green;
}
.div3{
height: 50px;
width: 20%;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
点击pycharm上面浏览器

修改box_model.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
border: dashed 2px black;
height: 200px;
width: 30%;
background-color: rebeccapurple;
}
.div2{
border: dashed 2px black;
height: 200px;
width: 20%;
background-color: green;
}
.div3{
border: dashed 2px black;
height: 50px;
width: 20%;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
点击pycharm上面浏览器

修改box_model.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
border: dashed 2px black;
height: 200px;
width: 30%;
background-color: rebeccapurple;
margin: 10px;
}
.div2{
border: dashed 2px black;
height: 200px;
width: 20%;
background-color: green;
}
.div3{
border: dashed 2px black;
height: 50px;
width: 20%;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
点击pycharm上面浏览器

修改box_model.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
border: dashed 2px black;
height: 200px;
width: 30%;
background-color: rebeccapurple;
}
.div2{
border: dashed 2px black;
height: 200px;
width: 20%;
background-color: green;
margin: 10px;
}
.div3{
border: dashed 2px black;
height: 50px;
width: 20%;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改box_model.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
boby{
border: solid green 3px;
}
.div1{
border: dashed 2px black;
height: 200px;
width: 30%;
background-color: rebeccapurple;
}
.div2{
border: dashed 2px black;
height: 200px;
width: 20%;
background-color: green;
margin: 10px;
}
.div3{
border: dashed 2px black;
height: 50px;
width: 20%;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
点击pycharm上面浏览器

修改box_model.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
boby{
margin: 0px;
border: solid green 3px;
}
.div1{
border: dashed 2px black;
height: 200px;
width: 30%;
background-color: rebeccapurple;
}
.div2{
border: dashed 2px black;
height: 200px;
width: 20%;
background-color: green;
margin: 10px;
}
.div3{
border: dashed 2px black;
height: 50px;
width: 20%;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
点击pycharm上面浏览器

修改box_model.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
boby{
margin: -5px;
border: solid green 3px;
}
.div1{
border: dashed 2px black;
height: 200px;
width: 30%;
background-color: rebeccapurple;
}
.div2{
border: dashed 2px black;
height: 200px;
width: 20%;
background-color: green;
margin: 10px;
}
.div3{
border: dashed 2px black;
height: 50px;
width: 20%;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
用pycharm新建margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
background-color: aqua;
width: 300px;
height: 300px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器

修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
background-color: aqua;
width: 300px;
height: 300px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器

修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
background-color: aqua;
width: 300px;
height: 300px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器
修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器

修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px solid green;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器
修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
background-color: aqua;
width: 300px;
height: 300px;
/*border: 1px solid green;*/
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 100px;
}
</style>
</head>
<body>
<div class="div1">111
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器
修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px solid green;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器

修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px solid green;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
/*margin: 100px;*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器
修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px solid green;
padding: 100px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
/*margin: 100px;*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器

修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px solid green;
padding-left: 100px;
padding-top: 100px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
/*margin: 100px;*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器

修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px solid green;
padding: 200px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
/*margin: 100px;*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器

修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px solid green;
padding: 100px -100px -100px 100px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
/*margin: 100px;*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器

修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px solid green;
padding-top: 100px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
/*margin: 100px;*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器

修改margin_padding.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
border: 1px solid green;
padding: 200px 0px 0px 200px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
/*margin: 100px;*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
点击pycharm上面浏览器

浙公网安备 33010602011771号