上div与下div边距的包含关系

最新推荐文章于 2022-04-13 08:44:53 发布
最新推荐文章于 2022-04-13 08:44:53 发布
阅读量3.3k 收藏 1
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 网站前端 文章标签： div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ahuiok/article/details/2073759
本文详细解析了CSS中当两个相邻div元素同时设置了上下边距(margin)时，实际显示的距离并非两者相加，而是取较大值的现象。通过具体例子说明了这一特性，并解释了背后的原因。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<div style="margin-bottom:50px;background-color:#f00;height:100px;"></div>
<div style="margin-top:80px;background-color:#00f;height:100px;"></div>


页面中，上div的下边距 margin-bottom 为50px. 下div的上边距  margin-top:80px.
实际显示只有80px，原因是下div的上边距包含了上div的下边距。
同理：如果上div的下边距为80px，下div的上边距为50px，那两个div之间的距离也为80px.

总结：出现两个div都设置了 margin的上下边距时，这两个div之间的距离不是累加而是取边距设置的比较大那一个。

jsp+左间距_DIV间距设置
weixin_39877898的博客
12-19 3163
DIV间距设置专题-DIVCSS5一、消除上下结构距离 - TOPDIV之间距离让两个上下结构DIV块距离为零，通常新手在制作DIV CSS页面的时候，不会考虑到初始化CSS属性，这样各标签属性默认的CSS属性将会造成错位、兼容等问题。如上下结构的2个box DIV块，中间有一定间距无法消除二、清除DIV间距解决方法 - TOP在CSS里设置DIV标签各属性参数为0div{ma...
CSS中div的外边距margin
李昆鹏的博客
05-11 8316
---------------------------------------------CSS中div的外边距margin----------------------------------------- 代码示例：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...
img 图片 下边距 解决办法
技术改变世界
03-09 788
在不同浏览器下图片下面会出现莫名的下边距，经测算在FF中 下边距大概是多出了3像素左右，而IE6更多，在IE8中展示却是完好的，以往的做法只需要将img定义为块状级就解决了问题； 但其原理是：图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关 的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size ...
div中图片下方有边距
solocao的专栏
04-10 972
遇到一个小问题，记录一下。 1、问题描述 <div class="thumb-box"> <img class="tt-img" src="https://cdn.w7.cc/images/2017/11/09/15102068385a03ed7644fbf_OxLCy7ypXKpd.png?imageView2/5/w/88/h/88/format/png" alt...
div 边框 边距设置
Corn的博客
03-29 4415
1、上面是input框 padding-bottom设置，F12可直接在右侧调试查看效果。 2、div是最常见的容器了，图中看一下它的参数500*50，这里任意设置上边距padding-top:30，看下效果： 3、再来看看border边框设置效果： 4、对于容器在浏览器的位置是绝对的还是相对的、还是静止的，可以通过position进行设置啦。 ...
上下两个div设置margin为20px，两个div的间距是多少，为什么？
jiwei_1234____5的博客
01-29 5310
答案是20 你们可能会想为什么不是40呢？这就要好好理解一下盒子模型了（如下图所示） 盒子的大小由内容，内边距和边框决定，外边距只是用来吧周围的东西挤开并不算在盒子的大小里面。也就是说外边距只与自身有关，并不影响其他盒子的距离计算。 换句话说就是上下两个div设置margin，最终的距离由大的决定 例如：上下两个div设置margin分别为20px，30px，两个div的间距是30px ...
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。也就是其实际的尺寸变成了：设置的宽高尺寸+内边距+边框。这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸...
DIV 边距属性在Chrome和IE中的区别深入理解
09-25
边距是元素与周围元素之间的空间，而填充则是元素内容与边框之间的空间。在W3C的CSS规范中，元素的总宽度等于`width`加上左右`padding`和`border`的宽度，再加上左右`margin`的值。这就是所谓的"盒模型"。 在Chrome...
JS实现固定在右下角可展开收缩DIV层的方法
10-24
`）和适当的边距，可以固定DIV层在视口的右下角。 4. **JavaScript事件处理**：为了实现交互效果，文档中使用了JavaScript中的`onmouseover`、`onclick`、`setTimeout`等方法来处理用户的交互事件。如`onmouseover`...
借助CSS定位来实现把一个DIV放到另一个div右下角
09-25
定位属性决定了元素的最终位置，而盒模型决定了元素的尺寸以及与其它元素的关系。 值得注意的是，在使用绝对定位时，子元素脱离了文档流。这意味着，它不再占据原来的位置，导致父元素可能没有内容来填充。在某些...
html点击按钮弹出悬浮窗_html弹窗，html网页弹窗代码
热门推荐
weixin_34513260的博客
12-29 2万+
<html><head><title>作业</title><script>functionwelcome(){window.alert("欢迎进入");}</script></head><bodyonload="welcome();">这是老师布置的弹窗作业</body></html&...
div里的图片距离div下边框多3个像素的解决方法
09-25
div下边莫名多出来的3px的像padding-bottom的东西，也就是常说的3像素bug，下面是解决方法,需要的朋友可以参考下
div默认外边距是多少_html中div的外边距和内边距都是什么意思，怎么设置
weixin_39614262的博客
12-21 1380
展开全部内边距padding的意思是： 边框与内容之间的距离。62616964757a686964616fe4b893e5b19e31333365656533外边距margin的意思是：边框与边框之间的距离。拓展资料外边距margin左边距 margin-left:数值 | autoauto:即距离这个边最远的距离；右边距: margin-right:数值 | auto；上边距: margin-t...
解决div下边距莫名多出4px问题
SiShen654的博客
07-12 895
问题：div下边多出4px 主要是div标签内的留空导致的，解决如下： 将父盒子的文字大小设置为0即可 font-size: 0
div中ul的上下边距
菜鹏
08-04 6971
index.html #user{ width:998px; height:50px; background-color:red; } #navigater { width:998px; height:50px; background-color:blue; } #navigater ul{ list-style-type:none; } #na
div内上下左右距离_css如何设置div子容器之间的间距?
weixin_31237295的博客
12-31 1万+
用padding 属性来控制 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。·语法结构(1)padding-left:10px; 左内边距(2)padding-right:10px; 右内边距(3)padding-top:10px; 上内边距(4)padding-bottom:10px; 下内边距(5)padding：10px; 四边统一内边距(6)padding:...
如何让div至于最底部并且水平居中？
江南孤鹜——“知行合一”的Software Developer
05-22 1万+
解决方案 首先，用绝对定位以及z-index将div至于最底部： position: absolute; z-index:-999; 然后，让绝对定位的div水平居中。使用负外边距可以解决，负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，
html底部div固定在底部
xiejunna的博客
08-24 1万+
整体结构： 保险购买 <div class="footer_div2"> <a href="#"> <p id="footer_text">我的账户</p> </a> </div> 样式描述： .footer_div
【html】盒模型div，边框border，内边距padding，外边距margin
m0_50947589的博客
04-13 9380
#初识盒模型@TOC 要想学习盒模型，首先要知道什么是盒模型。顾名思义，每个div标签都是一个矩形，像一个盒子，所以HTML页面布局可以理解为多个盒子嵌套排列而成。 ##盒模型的组成@TOC 盒模型包括：content（内容）、border（边框）、padding（内边距）以及margin（外边距）。 content（内容）：显现图像和文本内容。 border（边框）：指围绕在盒模型外侧的一条样式自定义的线。 padding（内边距）：指元素内容与边框之间的间距。 margin（外边距）：指围绕在边框之外的
怎么让div两个盒子上下边距为0
最新发布
03-31
为了让两个 `div` 盒子之间的上下边距变为 0，我们需要了解 CSS 中的 **外边距折叠（Margin Collapsing）** 现象。默认情况下，垂直方向上相邻的块级元素之间会发生外边距合并现象，这可能导致即使设置了 `margin-top` 和 `margin-bottom` 的值，最终显示的效果却并非预期。 下面是一些常用的方式来解决这个问题： --- ### 1. 设置父容器的 `overflow` 属性 通过将包含这两个盒子的父容器的 `overflow` 属性设置为非默认值（例如 `hidden`, `auto` 或者具体的像素值等），可以阻止外部边界发生坍缩情况。 ```css .parent { overflow: hidden; /* 或 auto */ } ``` 这样做会强制浏览器重新计算每个孩子的实际位置信息而不是简单的把顶部底部间距叠加起来考虑。 --- ### 2. 添加内边距（Padding） 在需要消除多余间隔的那个 div 内部适当加入一点 padding 来打破原有的 margin 结构关系也可能有效果: ```css .child-div { padding-top: 1px; margin-top: 0; } ``` 这里关键是引入了新的层叠规则使得原 Margin 不再生效. --- ### 3. 利用 border 技巧 另外一种可行办法是在其中任意一方加设不可见 borders(颜色透明即可)，同样能够达成目的因为 Border 存在的话 Margins 就不会再 collapse : ```css .first-box{ border-bottom : thin solid rgba(0,0,0,.0); } .second-box { border-top:thin solid rgba(0,0,0,.0); } ``` 上述代码片段中的 `rgba()` 函数生成完全透明的颜色线条作为伪界限从而避免真正意义上的视觉干扰同时解决了目标需求。 --- ### 4. 应用 Flexbox 布局 现代前端开发推荐使用更先进的布局模式如 Flexbox 。在此框架之下所有项目都紧密贴合主轴次轴无需担心传统 Block Flow 引发的一系列复杂状况包括本题提到的内容。 只需稍微配置一下 container 即可完成任务： ```css .container { display: flex; flex-direction: column; } .item:first-child, .item:last-child { margin: 0; /* 显式设定无距离*/ } ``` 如此一来便轻松实现了零间隙排布方案啦~ --- 总结来说有多种途径可用于调整网页界面当中相互独立区块间的相对定位关联度数，具体情况具体对待选取最适合自身项目的那套做法吧！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值