<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0px;/* 外间距 */
padding: 0px;
}
div {
height: 200px;
}
.text1 {
background-color: antiquewhite;
margin-top: 50px; /* 上间距 向下移动 */
margin-right: 100px; /* 右间距 往左移动 */
margin-bottom: 50px; /* 下间距 */
margin-left: 50px; /* 左间距 */
}
.text2 {
background-color: aqua;
margin-top: -50px;/* 支持给负数,方向相反 */
}
.text3 {
background-color: cadetblue;
margin: 50px 50px 50px 50px; /* 上 右 下 左 */
}
.text4 {
background-color: darkgoldenrod;
}
.text5 {
background-color: olive;
margin: 50px 100px 50px; /* 上 左右 下 */
}
.text6 {
background-color: orange;
}
.text7 {
background-color: purple;
margin: 50px 50px;/* 上下 左右 */
}
.text8{
width: 50%;
background-color: pink;
margin: auto;/* 上下左右都是auto auto:自动 暂时支持左右自动 上下无效 */
}
.text9{
background-color: black;
margin: 100px;/* 上下左右 */
}
</style>
</head>
<body>
<div class="text1">1111</div>
<div class="text2">2222</div>
<div class="text3">3333</div>
<div class="text4">4444</div>
<div class="text5">5555</div>
<div class="text6">6666</div>
<div class="text7">7777</div>
<div class="text8">8888</div>
<div class="text9">9999</div>
</body>
</html>
使用中遇见问题及解决方法：
标签：间距,color,Margin,50px,100px,background,margin From： https://www.cnblogs.com/xu529/p/16942261.html