margin外边距问题

1 、上下边距会叠加

!DOCTYPE html>
<html>
<head>
<m<etacharset="UTF-8">
<title></title>
<style>
.box1{
width:500px;
height:300px;
background: blue;
margin-bottom:30px;
}
.box2{
width:300px;
height:100px;
background:#ffff00;
margin-top:30px;
}
</style>
</head>
<body>
<divclass="box1"></div>
<divclass="box2"></div>
</body>
</html>

2、父级包含子级的时候，子级的margin-top会传递给父级,可以使用父级的padding替代自己的margin。

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
.box1{
width:500px;
height:300px;
background: blue;
}
.box2{
width:300px;
height:100px;
background:#ffff00;
margin-top:30px;
}
</style>
</head>
<body>
<divclass="box1">
<divclass="box2"></div>
</div>
</body>
</html>

3、margin左右

margin-lefta：uto 偏右

margin-right：auto 偏左

margin：auto 水平居中

时间： 2024-10-08 11:04:14

margin外边距问题的相关文章

绝对定位对margin外边距的影响

绝对定位对margin外边距的影响:关于什么是绝对定位和外边距这里就不多介绍了,具体可以参阅以下两篇文章.(1).绝对定位可以参阅CSS的绝对定位一章节.(2).外边距可以参阅CSS的外边距一章节.下面就通过代码实例介绍一下绝对定位对于margin外边距的影响.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&qu

margin外边距合并详解

margin外边距合并详解: 外边距合并现象在网页布局中非常的常见,必须对此有明确的把我,以此做到未雨绸缪,否则可能影响工作效率,甚至严重阻碍项目的进度.在网络上已经有大量的相关文章,下面再通过实例结合对网络教材的总结,再来介绍一下外边距合并现象. 概念: 相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的外边距合并. 水平方向不存在此现象. 外边距合并产生条件: 1.相邻的外边距之间没有非空内容.padding和border和clear分隔. 2.对象都处于文档流中,即非浮动和

CSS Margin(外边距)

CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边距.也可以一次改变所有的属性. 可能的值值说明 auto 设置浏览器边距.这样做的结果会依赖于浏览器 length 定义一个固定的margin(使用像素,pt,em等) % 定义一个使用百分比的边距 Margin可以使用负值,重叠的内容. 在CSS中,它可以指定不同的侧面不同的边距: 实例 m

margin外边距负值的作用

margin外边距负值的作用:在很多CSS代码中,都可以看到margin外边距有使用负值的情况,下面就介绍一下他的作用.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部

[ css 外边距 margin ] css中margin外边距合并问题讲解及实例演示

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距;合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: CSS 外边距合并实例 1 亲自试一试

padding(内边距)、margin(外边距)、border(边框)

元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 margin 设置为负值,元素将会变大.

margin外边距属性

外边距属性: 设置元素与元素之间的距离(外边距),4个方向(上右下左). margin:长度值|百分比|auto margin-top margin-right margin-bottom margin-left 说明:值可为负值. 默认情况下,相应HTML块级元素存在外边距 body.h1~h6.p...... 声明margin属性,覆盖默认样式: body,h1,h2,h3,h4,h5,h6,p{ margin:0; } margin值为auto,实现水平方向居中显示效果. 由浏览器计算外边

margin 外边距

1.单个方向的样式 margin-top: 100px; margin-right: 100px; margin-bottom: 100px; margin-left: 100px; 2.复合样式 margin: 100px; /*4个方向都是100px*/ margin: 100px 50px; /*上下是100px,左右是50*/ margin: 100px 50px 20px; /*上是100px,左右是50px,下是20px*/ margin: 100px 50px 20px 10px;

转载：margin外边距合并问题以及解决方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .div{ /* overflow: hidden/auto;*//*利用该属性或者通过给父级元素设置border可以避免出现父级元素的margin合