DIV内部的最后一个元素的margin-bottom不算高度

最新推荐文章于 2023-12-26 19:45:12 发布
原创 最新推荐文章于 2023-12-26 19:45:12 发布 · 2.9k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#div #firebug #jquery #浏览器
本文描述了一个关于父元素div高度计算的问题，在不设置高度的情况下，使用jQuery.outHeight获取的高度未包含最后一个子元素的margin-bottom值。该现象在多种浏览器中一致出现。

今天在做项目的时候遇到的一个问题，暂时还没有解释的清

 

一个父元素的div，高度没有设定(就是auto嘛)，那么他的高度应该是由里面的元素高度之和决定。

 

我们在里面放入了多个块级元素，且没有用到浮动和定位，就是这么挨个堆下来。

 

最后用jQuery.outHeight获取父级元素高度时，发现DIV内部的最后一个元素的margin-bottom的高度没有被算进来

 

 

所有浏览器都是这个结果，于是我怀疑是jquery本身的问题，但谁知用firebug看也是同样的结果，彻底无语了

 

 

 

先记录下，以后看是否能回答

 

css 去除标签中最后一个子元素的margin（3种方式）
陈先生的博客
06-07 6521
最近遇到的在布局的时候，最后一个margin不想要，虽然很简单，但还是想总结一下。 先上公用代码： css * { padding: 0px; margin: 0px; box-sizing: border-box; } body { width: 1200px; margin: 0px auto; }
CSS 关于margin你应该要知道的
qq_43293207的博客
04-04 2764
1.margin与元素尺寸 我们知道，在W3C盒模型下（即box-sizing:content-box）给一个元素设置padding内边距的时候，会改变元素原有的实际尺寸（即使你设置该元素的width属性）。而margin属性虽然其本意为外边距，让人以为只会影响其与其他元素间的距离。实际上，当元素处于“充分利用可用空间”的状态时，margin属性会影响其实际尺寸 示例： <div class="container"> <div class="child"></div&g
【前端】子元素加margin，父元素div高度计算错误--margin越界
michiko98的博客
11-04 870
css margin越界 父子元素
一个计算高度的小问题(bfc、margin-top BUG)
weixin_42043532的博客
06-30 463
感觉挺简单的两道题，实际上考察了许多小知识点 第二题：0 containner下两个item都是浮动元素，而浮动元素是脱离文档流的，会造成父元素高度塌陷，也就是不会撑开父元素的高度，所以container高度为0； 第一题：30px 首先，container设置border：1px；边框只设置粗细是无效的，必须指定边框的样式，才会出现边框，例：border：solid； 其次，container是一个BFC，它里面两个相邻item的上下margin会发生重叠，所以两个item中间只有10px的像素 第一.
去掉每一行最后一个div的margin
ys_dd的博客
08-10 1032
效果图： 代码： 主要用到的就是width:calc()属性。
详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)
IT_Helianthus的博客
05-20 9390
文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距，该属性有多个值： 值 描述 auto 浏览器设置的上外边距。 length 定义固定的上外边距。默认值是 0。允许使用负值。 % 定义基于父对象总高...
定义了浮动元素后margin-bottom失效的解决办法
elsyy良师益友的博客
12-21 3744
虽然IE6慢慢的退出市场了，但是还是有必要了解一些兼容问题，让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。 在 IE6 IE7 IE8(Q)中，容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的 
margin-bottom负值实现多列等高布局
kongjunchao159的博客
10-17 1721
什么是多列等高布局？ 经常会有这样的需求，一个父容器中，存在多列子容器，这些子容器的高度是不固定的，正常情况下，父容器的高度会随着其子容器最高的那个容器的高度而变化伸缩，但其它子容器的高度并不会变化，导致如下结果 显然，这并不是我们想要的，我们需要左侧和右侧的高度共同变化，这时，就可以使用margin-bottom负边距实现 padding补偿法 首先，给子容器设置padding-
等高布局margin-bottom与padding-bottom
weixin_46716426的博客
09-27 482
等高布局margin-bottom与padding-bottom margin-bottom取负值 padding-bottom取正直 保证绝对值相等，起到两者相互抵消的作用 等高布局实例： *{padding:0;margin:0} #main{width:100%;border:5px solid black;overflow:hidden;} #main .div1{width:200px;float:left;background:yellow;margin-bottom:-2000px;paddi
解决margin塌陷的问题_高度塌陷最详细解决方案
weixin_36413247的博客
01-05 2586
通常在咱们网页布局中都会遇到高度塌陷这个问题，今天就来详细讲解一下这个问题高度塌陷父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）以下动图演示了高度塌陷，可以看到给子元素添加浮动后，父元素的高度变为了0下面就来讲解一下怎么解决高度塌陷问题，这里只为大家总结几种最常用的方法，不常用方法等后期添加1、给父元素添加声明overflow：hidden优点：代码少、简单缺点：...
css每行数量一定，但最后一行数量不定，选中最后一行添加margin-bottom
个人博客
12-26 683
为了兼容旧版本60左右的谷歌浏览器，放弃使用flex布局中gap属性还是使用margin兼容性最好，但需要清除最后一行的margin。
Uniapp 最后一个盒子 margin-bottom 后没有效果
m0_48909912的博客
12-26 1144
Uniapp 最后一个盒子 margin-bottom 后没有效果
为什么padding/margin的百分比单位基于父元素的宽度而不是高度
weixin_43563204的博客
03-11 1700
W3C规范中提出： padding/margin使用%单位是规定基于父元素的宽度的百分比的内外边距。 原因可能为： 父元素的高度往往由子元素来决定，如果改变margin-top比例增加，相应的，父元素高度也会进行适应性增加；此时父元素高度增加的同时，margin-top若以父元素高度为基准，则其实际数值又会发生适应性变化，双向因果会造成循环，所以W3C的规范做出了以上规定。 而至于真正原因是什么，其实不必太纠结，W3C提出了标准，我们按标准进行开发即可。 用途： 实现子元素宽高等比缩放 //子元素，%单位以
margin-bottom无效问题以及div里内容动态居中样式!
weixin_34220179的博客
04-27 775
最近调前端样式时候,遇到一个需求,在中间文字不对等的情况下想让下面的操作文字距离底部对齐,如图: , 刚开始觉得使用margin-bottom就可以,后来发现只有margin-top是管用的,查了资料发现: margin-bottom是下方的外边距，并不能让元素向下方移动，margin-top作为上边距，把元素“推”了下去。 如果希望图标距离下方30px，那么可以试试在ul上设置posit...
CSS_为什么margin-bottom经常无效，或者无法实现子div底部贴边父div？
qq_45716607的博客
04-02 2238
原文链接https://blog.csdn.net/Chill_Lyn/article/details/100903408 首先我们定义两个div，一大一小，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
单列div不包含里面div margin的解决方法
weixin_34409703的博客
04-22 347
2019独角兽企业重金招聘Python工程师标准>>> ...
代码设置margin_css 高度计算你真的会了?!(关于margin)
weixin_42362068的博客
01-12 740
今天看博客,看到一个小伙伴面试字节时的一个问题.问题:父元素container的高度为多少?(代码如下)<div class="container"> <div class="inner"/> <div class="inner"/> </div> .container { border: 1px; } .i...
设置 margin 的上下和设置宽高无效，其他有效的元素有哪些？
陈浩然哦 的博客
04-13 2647
设置 margin 的上下和设置宽高无效，其他有效的元素有哪些？ 1、和其他元素都在一行上； 2、高和外边距不可改变； 3、宽度就是它的文字或图片的宽度，不可改变； 4、设置宽度width无效。 5、设置高度height无效，可以通过line-height来设置； 6、设置margin只有左右margin有效，上下无效； 7、设置padding只有左右padding有效，上下则无效。注意元素范...
负margin对元素高度的影响
lulula的博客
09-21 514
情况一 margin-bottom为负值不会产生位移，会减少自身的供css读取的高度                         I dont have the height                    .container{         margin:100px auto;         width: 500px;         border
CSS ( Flex布局 ) —— 关于flex布局使用滚动条时，最后一个元素margin无效的问题
Mickeymouse
08-21 7114
在开发中，很常用到flex布局，当使用flex布局，需要使用滚动条的时候，最后一个元素会出现margin无效的情况，如下： <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div&
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值