当子元素有 margin 属性，父元素高度问题

最新推荐文章于 2024-01-07 02:56:11 发布

overtree

最新推荐文章于 2024-01-07 02:56:11 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/overtree/article/details/60162690

版权

当子元素设置了margin-top，父元素没有设置border时，父元素高度为子元素高度

当父元素设置了border，父元素高度为子元素高度 + margin-top 的值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

overtree

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

css 父子元素margin,CSS外边距合并：子元素的margin-top外边距被作用在父元素

weixin_35891744的博客

08-04

1024

[摘要]CSS外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。不理解此规范的话，会在前端布局中出现异常问题，本文深入浅出学习此规范，并提供解决办法。不得不说前端是一个水很深的行业，虽然起点低，稍微一学就能入门；但是很多实操型的知识如各种兼容性、规范性问题不在实际操作中遇到是无法深刻的理解的，笔者就遇到了CSS外边距合并这一看似非主流却很主流的问题。问题描述：笔者想得到一个两个内套的...

父元素获取对应absolute子元素的高度

nicholeni的博客

06-11

1967

父元素获取对应absolute子元素的高度学习记录jquery 部分例子学习记录 position: absolute 会脱离文档流，其对应的父元素不会随着子元素的内容自动撑开。想要子元素靠右对齐或者居中对齐，同时做自适应的效果，用jquery获取每个子元素的高度再给父元素。 jquery 部分 $('.abH').each(function(){ // 为每个class="abH"的盒子执行函数 var abHeight = $(this).innerHeight(); $(th

参与评论您还未登录，请先登录后发表或查看评论

【前端】子元素加margin，父元素div高度计算错误--margin越界

michiko98的博客

11-04

693

css margin越界父子元素

子元素margin影响父元素的解决办法不改变父元素高度 margin超出

似水流年，举重若轻

02-15

432

margin超出 子元素超出父元素

父元素与子元素之间的margin-top问题(css hack)

weixin_33869377的博客

04-20

hack：父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码：代码如下:<div class="box1"> <div class="box2"></div> </div> css样式：代码如下...

父子关系中，子元素margin-top会作用在父元素上面，如何解决？

2301_76892837的博客

03-07

602

父子关系中，子元素margin-top会作用在父元素上面，如何解决？

子元素的margin-top出现在父元素之外的问题及解决

weixin_42349568的博客

07-05

1451

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .outer{ width: 100px; height: 100px; background: blue

父元素的高度为0利用伪元素:after清除浮动可解决问题

12-13

让页面呈现多列布局时经常会使用 float:left/right ，可是浮动布局会导致父元素的高度为0（未设置高度的情况下），不会根据子元素的高度而变化，另外，后面不需要浮动想在下一行显示的标签出现在浮动元素的后面。...

第一个子标签的margin-top如何不影响父元素

ttttqqqqq的博客

07-09

854

解决margin-top bug 的方法父元素为块级元素块级标签：父级的padding-top属性块级标签：给父元素第一行添加文本块级标签：给父元素的开头添加伪元素块级元素：父元素overflow：hidden属性父元素为行内块元素单纯的一个元素并排的行内块标签中的元素行内块标签：vertical-align属性+margin属性行内块标签：vertical-align属性（负值？）为什么不提行内标签？

CSSmargin击穿问题（子元素margin-top会影响父元素）

Rich_77的博客

08-02

609

最近写一个H5页面的时候发现了这个被忽视的问题，一时没想到什么原因，搜了半天，记录一下，方便他人踩坑。唉，有些东西不用就忘。一、问题描述最终效果：会发现在元素上面会有20px的空白，然而我们并没有对父元素设置margin，可见是子元素的 margin-top：20px 影响到了父元素。二、原因：MDN的文档：如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top与其内一个或多个后代块级元素的上边界..

子元素的margin影响到父元素的大小

大连云鹏

03-04

706

总体来讲，这个问题是垂直外边距合并问题。也就是一个div，作为一个元素的第一个子集元素情况下，在设置了外边距之后，会与父级的div元素在某种情况下进行合并，那么在什么情况下呢第一个元素的上外边距会去查找父级的border或者padding，如果没找到，就会向外找margin，如果找到margin，相邻的两个margin会进行合并，这也就是垂直外边距合并。也就是说没有找到边界，就...

margin-top传递、父元素高度塌陷问题

@微你

08-04

378

子元素使用了margin-top时，父元素须加overflow:hidden，防止出现margin-top的传递问题。 子元素使用了float后，须给父元素加一个清浮操作（.clear:after{content:"";display:block;clear:both}），防止子元素浮动而造成的父元素高度塌陷问题。 ...

关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

muli`慕李

04-27

532

1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题。在给没有margin-top-border父元素中的子元素添加margin-top时（给子元素margin-top时，若这个子元素前面没有其他内容，这个margin-top值会应用到父元素上），发现没有直接表现出来，而是作用到父元素身上，就会导致子元素的margin-...

区块的高度随宽度变化

weixin_42789120的博客

09-16

190

padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的设置高度为0 在设置padding-top或padding-bottom

jquery中height()、outerHeight()、outerHeight(true)和offset()的区别

dxj124的博客

11-28

485

height()获取的是元素不包含padding、border、margin的高度 outerHeight()获取的是元素包含padding、border，不包含margin的高度 outerHeight(true)获取的是元素包含padding、border、margin的高度 offset()返回的是匹配元素相对于当前可视窗口的偏移坐标，返回的对象中包括...

子元素margin-top超出父元素边界问题解决

最新发布

qq_40493736的博客

01-07

584

当页面中第一个元素有margin-top属性时，会超出父元素的边界，导致顶部空出一块。，让这个边框包含在父元素之内，而不占用额外的空间，不影响原本页面布局。，给父元素添加一个1px的透明边框，限制子元素的边界。

子元素 margin 超出父元素的bug(垂直塌陷)

Ray_Huang

08-30

2308

今天写一个demo发现有一个很奇怪的页面表现，就是当子元素有margin时会影响父元素的margin： <style> .father{ width: 500px; height: 400px; border: 50px solid blue; border-color: red; background: blue; overflow:...

css之子布局100%，设置margin后超出父布局

snoto的专栏

12-25

3964

文章目录问题解决方式box-sizingcontent-boxborder-boxinherit 问题我们发现，如果子元素设置宽度为100%，然后设置了margin或者padding的话，会超出父布局的宽度：比如效果如下解决方式参考博文参考博文2 box-sizing 通过参考博文，我们知道可以使用box-sizing来设置 content-box 是box-siziing的默认值，...

vue怎么实现子元素高度等于父元素宽度

06-10

要实现 Vue 中子元素的高度等于父元素的宽度，可以使用 Vue 的内置指令 v-bind 和 v-on，以及 CSS 中的 padding 或者 margin 属性，通过动态绑定样式来实现。具体实现方法如下： 1. 使用 padding ```html <template> <div class="parent" :style="{ width: parentWidth + 'px' }"> <div class="child" :style="{ paddingTop: parentWidth + 'px' }"></div> </div> </template> <script> export default { data() { return { parentWidth: 200 // 父元素宽度 }; } }; </script> <style> .parent { position: relative; } .child { position: absolute; top: 0; left: 0; width: 100%; height: 0; background-color: #f00; } </style> ``` 在上面的代码中，首先使用 v-bind 指令将父元素的宽度绑定到一个 data 属性 parentWidth 上。然后通过 :style 绑定样式，将父元素的宽度设置为 parentWidth，并将子元素的 paddingTop 设置为 parentWidth，以实现子元素的高度等于父元素的宽度。 2. 使用 margin ```html <template> <div class="parent" :style="{ width: parentWidth + 'px' }"> <div class="child" :style="{ height: parentWidth + 'px' }"></div> </div> </template> <script> export default { data() { return { parentWidth: 200 // 父元素宽度 }; } }; </script> <style> .parent { position: relative; } .child { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 100%; background-color: #f00; } </style> ``` 在上面的代码中，同样使用 v-bind 指令将父元素的宽度绑定到一个 data 属性 parentWidth 上。然后通过 :style 绑定样式，将父元素的宽度设置为 parentWidth，并将子元素的高度设置为 parentWidth，以实现子元素的高度等于父元素的宽度。同时通过 margin-top: 100%，将子元素的顶部向上移动，让其与父元素的底部重合。需要注意的是，在 Vue 中使用动态绑定样式时，需要将样式绑定到一个对象上，并且样式的值需要使用字符串拼接的方式来进行动态绑定。