外边距(margin)
margin-top：当前盒子距离上层盒子头部的像素；
margin-bottom：当前盒子距离上层盒子底部的像素；
margin-left：当前盒子距离上层盒子左部的像素；
margin-right：当前盒子距离上层盒子右部的像素；
案例
去掉白色部分
2024年11月26日
外边距(margin)
margin-top：当前盒子距离上层盒子头部的像素；
margin-bottom：当前盒子距离上层盒子底部的像素；
margin-left：当前盒子距离上层盒子左部的像素；
margin-right：当前盒子距离上层盒子右部的像素；
案例
去掉白色部分
<!--head内部的css部分-->
<style type="text/css">
* { /*也可以写body*/
margin: 0px;
}
.box {
width: 300px;
height: 300px;
background-color: red;
margin: 0px;
}
.nav_box {
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
}
</style>
<!--html body部分-->
<div class="box">
<div class="nav_box"></div>
</div>
外边距合并
<!--head内部的css部分-->
<style type="text/css">
.one {
width: 300px;
height: 300px;
background-color: red;
margin-bottom: 10px;
}
.two {
width: 300px;
height: 300px;
background-color: green;
margin-top: 10px;
}
</style>
<!--html body部分-->
<div class="one"></div>
<div class="two"></div>
外边距的塌陷
当嵌套的时候，上下设置margin可能会出现外边距塌陷的情况；
示例
<!--head内部的css部分-->
<style type="text/css">
.father {
width: 300px;
height: 200px;
background-color: red;
}
.son {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<!--html body部分-->
<div class="father">
<div class="son"></div>
</div>
解决方法一
给父盒子设置border边框
<!--head内部的css部分-->
<style type="text/css">
.father {
width: 300px;
height: 200px;
background-color: red;
border: 1px red solid;
}
.son {
width: 100px;
height: 100px;
background-color: green;
margin: 100px;
}
</style>
<!--html body部分-->
<div class="father">
<div class="son"></div>
</div>
解决方法二
给父盒子设置overflow:hidden;
overflow：拒绝溢出，他会触发bfc（格式化上下文）；
BFC
<!--head内部的css部分-->
<style type="text/css">
.father {
width: 300px;
height: 200px;
background-color: red;
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: green;
margin: 50px 100px;
}
</style>
<!--html body部分-->
<div class="father">
<div class="son"></div>
</div>
行业动态案例
<!--head内部的css部分-->
<style type="text/css">
.box {
width: 238px;
height: 166px;
border: 1px solid #F0F0F0;
margin: 0 auto;
}
.div1 {
height: 40px;
border-bottom: 1px solid #F0F0F0;
border-top: 3px solid #EE9A49;
line-height: 40px;
padding-left: 12px;
font-family: 宋体;
}
.div2 {
height: 160px;
}
ul,li {
font-size: 15px;
list-style: none;
margin: 0;
padding: 0;
}
ul {
padding-top: 14px;
}
li {
line-height: 20px;
padding-left: 19px;
background-image: url("li_bg.jpg");
background-repeat: no-repeat;
background-position: 12px center;
font-size: 13px;
}
a {
text-decoration: none;
color: #5B5B5B;
}
a:hover {
text-decoration: underline;
color: red;
}
</style>
<!--html body部分-->
<div class="box">
<div class="div1">行业动态</div>
<div class="div2">
<ul type="square">
<li><a href="#">气质不凡绝妙签名</a></li>
<li><a href="#">精彩你的手机生活</a></li>
<li><a href="#">让草根推举草根</a></li>
<li><a href="#">精彩生活快来看</a></li>
<li><a href="#">草根名博有伯乐</a></li>
</ul>
</div>
</div>
爱宠知识表单示例
<!--head内部的css部分-->
<style type="text/css">
.box {
width: 260px;
height: 330px;
background-image: url("bg.gif");
margin: 0 auto;
overflow: hidden;
}
.nav {
height: 23px;
margin: 11px;
margin-bottom: 5px;
border-left: 4px solid #C9E143;
font-size: 16px;
font-family: 微软雅黑;
color: white;
line-height: 23px;
padding-left: 11px;
}
ul {
padding: 0px;
margin: 10px;
height: 279px;
width: 210px;
list-style: none;
background-color: white;
padding: 0 15px;
}
li {
height: 30px;
border-bottom: 1px dashed #666;
background-image: url("tb.gif");
background-repeat: no-repeat;
background-position: 1px center;
line-height: 30px;
padding: 0 15px;
}
</style>
<!--html body部分-->
<div class="box">
<div class="nav">爱宠知识</div>
<ul>
<li><a href="#" style="text-decoration: none;">养狗比养猫更健康</a></li>
<li><a href="#" style="text-decoration: none;">养狗比养猫更健康</a></li>
<li><a href="#" style="text-decoration: none;">养狗比养猫更健康</a></li>
<li><a href="#" style="text-decoration: none;">养狗比养猫更健康</a></li>
<li><a href="#" style="text-decoration: none;">养狗比养猫更健康</a></li>
<li><a href="#" style="text-decoration: none;">养狗比养猫更健康</a></li>
<li><a href="#" style="text-decoration: none;">养狗比养猫更健康</a></li>
<li><a href="#" style="text-decoration: none;">养狗比养猫更健康</a></li>
<li><a href="#" style="text-decoration: none;">养狗比养猫更健康</a></li>
</ul>
</div>
个人资料案例
<!--head内部的css部分-->
<style type="text/css">
.box {
width: 200px;
height: 400px;
border: 1px solid #E0E3E1;
margin: 0 auto;
overflow: hidden;
}
.info {
height: 25px;
background-color: #ECEDEE;
line-height: 25px;
font-size: 15px;
padding-left: 10px;
}
.body {
height: 250px;
text-align: center;
border-bottom: 1.5px dotted #ECEDEE;
padding: 10px;
}
.cce {
width: 65px;
height: 23px;
background: left center #ECEDEE;
background-image: url("vb.jpg");
background-repeat: no-repeat;
margin-top: 10px;
margin-left: -5px;
line-height: 17px;
font-size: 15px;
font-family: 微软雅黑;
}
.csw {
padding: 20px;
text-align: center;
}
.iput {
display: inline-block;
margin: 5px;
margin-right: 8px;
}
input {
display: inline-block;
width: 70px;
height: 20px;
}
</style>
<!--html body部分-->
<div class="box">
<div class="info">个人资料</div>
<div class="body"><img src="1.jpg"><br>
<span>V闪闪</span><img src="v.jpg" alt=""><br>
<span><a href="https://blog.doorta.com/" title="去往我的博客" target="_blank"><input type="button" value="博客" class="cce"></a></span>
</div>
<div class="csw">
<span class="s1"><a href="#"><input type="button" value="加好友" class="iput"></a><a href="#"><input type="button" value="发纸条" class="input2"></a></span><br>
<span class="s2"><a href="#"><input type="button" value="写留言" class="iput"></a><a href="#"><input type="button" value="加关注" class="input2"></a></span><br>
</div>
</div>