上下两个div设置margin为20px，两个div的间距是多少，为什么？

最新推荐文章于 2022-10-16 20:54:49 发布
最新推荐文章于 2022-10-16 20:54:49 发布
阅读量5k 收藏 3
点赞数 2
分类专栏： 前端面试笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiwei_1234____5/article/details/104109356
版权

答案是20
你们可能会想为什么不是40呢？这就要好好理解一下盒子模型了（如下图所示）
在这里插入图片描述
盒子的大小由内容，内边距和边框决定，外边距只是用来吧周围的东西挤开并不算在盒子的大小里面。也就是说外边距只与自身有关，并不影响其他盒子的距离计算。
换句话说就是上下两个div设置margin，最终的距离由大的决定
例如：上下两个div设置margin分别为20px，30px，两个div的间距是30px

没人看的垃圾博客
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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间距
皮哥不皮
03-11 804
条件： div1 margin-bottom:20px; div2 margin-bottom:10px; 问题： div1和div的距离是多少？
margin设置div与div间距
热门推荐
lzf的博客
04-11 1万+
margin用于设置对象标签之间距离间隔，比如2个上下排列的DIV盒子，我们就可以使用margin样式实现上下2个盒子间距。 其实说白了padding就是内容与边框的空隙.而margin 则是模块与模块的空隙.下面图解: margin 与 padding 得盒子模型图解
html设置div的margin,css大div里面放小div，小div设置margin-top属性，为什么大div也飘起来了，有图...
weixin_32661017的博客
06-25 495
因为CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。但对于父块DI...
盒子外边距
qq1632047376的博客
11-23 207
margin:外边距 margin:10px; 一个值:上下左右 margin:10px 20px ; 二个值：上下/左右 margin:10px 20px 30px ; 三个值:上 左/右 下 margin:10px 20px 30px 40px; 四个值：上 下 左 右 *{ margin：0px; padding:0px; } 初始化网页元素：网页中所有的元素的内外边距都为0 盒子水平居中：左右外边距设置为auto.前提条件：有width .box${box
上div与下div边距的包含关系
不小心
01-30 3219
页面中，上div的下边距 margin-bottom 为50px. 下div的上边距  margin-top:80px. 实际显示只有80px，原因是下div的上边距包含了上div的下边距。同理：如果上div的下边距为80px，下div的上边距为50px，那两个div之间的距离也为80px.总结：出现两个div都设置了 margin的上下边距时，这两个div之间的距离不是累加而是取边距设置的比较大
IE6 两个div有间隙的问题（IE 3px bug）
12-10
其中一种常用的方法是利用负边距（negative margin），将其中一个或两个div的外边距设置为负值，以便拉近它们的距离。然而，这种方法的局限性在于，如果这些div嵌套在一个已经浮动的父div中，负边距方法可能失效，...
用margin和overflow属性实现div间距的方法
10-30
### 使用margin和overflow属性实现div间距的方法 在网页布局中，如何优雅地处理元素之间的间距是一门艺术。本文将深入探讨一种使用`margin`和`overflow`属性来实现div间距的技术，这种方法不仅能够提高开发效率，还...
让多个div在同一行显示的样式及html代码
09-25
这两个属性通常用于控制元素的间距和清除浮动，它们在这里的出现可能是为了展示其不适用的情况，或者是一个错误的示范。 然而，真正的关键在于`.custom_div`类的样式设置。这里，`.custom_div`类通过设置`float:...
比较漂亮的一个导航条的效果DIV+CSS
10-30
根据提供的文件信息，本文将详细解析“比较漂亮的一个导航条的效果DIV+CSS”中的关键知识点。这主要包括HTML结构设计、CSS样式布局以及整体效果呈现。 ### HTML结构设计 #### 结构概览 在HTML部分，我们可以看到一...
css两端对齐之div+css布局实现2端对齐的4种方法总结
12-30
div+css布局实现2端对齐是我们网页排版中经常会使用到的，这篇文章将...该方法需要外面多嵌套一层来实现，通过元素的间距，做为中间层的margin溢出值来实现 <style> .box{ width:300px;margin:auto;overflow:
DIV多层嵌套margin-top的BUG问题
09-25
本文主要探讨一个常见的前端开发问题，即“DIV多层嵌套margin-top的BUG问题”。在某些浏览器，特别是Firefox和Internet Explorer的不同版本中，这个问题可能导致预期的样式效果出现偏差。 问题起源于浏览器对于CSS...
css中padding、margin两个重要属性的详细介绍及举例说明
01-05
其中，`padding`与`margin`是两个至关重要的属性，它们直接影响着网页元素的空间布局与视觉效果。本文将详细介绍这两个属性的功能、使用方法以及一些进阶技巧，帮助读者更深入地理解和掌握它们。 #### 二、基础知识...
详解css使既有浮动又有左右margin的多个元素两端对其
12-14
Bootstrap的`.row`类设置了左右内边距为负值(-15px)，这样`.col-xx-xx`类的子元素就可以在`.row`容器内实现两端对齐，并且元素之间保留了间距。 以下是一个简单的代码示例，展示了如何使用浮动和负边距来实现两端...
如何让一个div居于页面正中间【实现方法】
09-27
为了实现居中，我们需要将`div`的定位设置为绝对（absolute）或固定（fixed）。在这个例子中，我们将使用绝对定位。 在绝对定位中，`top`和`left`属性可以用来调整元素相对于其最近非静态定位祖先元素的位置。设置`...
关于div嵌套margin-top影响父div的解决办法及各种情况测试
qq_31936457的博客
11-21 1162
div嵌套时 margin-top的解决办法及各种情况测试
布局方式总结
weixin_49123737的博客
06-15 382
1.盒子布局 盒子布局一般使用div标签，它是一个块级元素，可以设置宽和高，独占一行 下面是一个he'z
1、7外边距margin
qq_62865634的博客
10-16 1145
本文仅仅简单介绍了margin表示盒子与盒子之间的边距，称为外边距。
外边距、内边距以及浮动相关
weixin_43507887的博客
02-25 1084
一、margin是外间距，可以设置一个容器外面的缝隙 1、简写 margin：20px； 上下左右 margin:20px 30px; 上下 左右 margin:20px 30px 40px; 上 左右 下 margin:20px 30px 40px 50px; 上右下左 2、单独设置 margin-top:20px; 外上间距 margin-bottom:20px; 外下间距 margin-left:20px; 外左间距 margin-right:20px; 外右间距
css两个div并排排列如何设置间距
最新发布
03-20
要让两个并排的 div 之间有间距，可以使用 margin 属性。例如，如果想要左侧的 div 右侧有 10px 的间距，可以这样设置： ``` <div style="float: left; width: 50%; margin-right: 10px;">左侧的 div</div> <div ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值