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

最新推荐文章于 2023-03-07 23:03:32 发布

overtree

最新推荐文章于 2023-03-07 23:03:32 发布

阅读量1k

点赞数

本文链接：https://blog.youkuaiyun.com/overtree/article/details/60162690

版权

本文探讨了在CSS布局中，子元素的margin-top属性和父元素的border设置如何影响整体布局的高度。具体而言，当子元素设置margin-top而父元素未设置border时，父元素高度仅取决于子元素高度；而当父元素设置了border，则父元素高度还须包括子元素的margin-top。

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

overtree

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS实现子元素在父元素中水平垂直居中的方法总结

weixin_42678796的博客

10-12

879

运行效果 HTML结构 <div class="container"> <div class="content"></div> </div> 实现方式 1. 绝对定位 + margin:auto 思路：绝对定位使子元素脱离文档流，再将各方向定位值设置为0，由margin自动分配剩余空间，从而实现元素的水平垂直居中 .container { width: 200px; height: 200px;

父div高度不能自适应子div高度的解决方案

10-25

在网页设计中，CSS布局常常会遇到父容器（父div）无法自动适应子元素（子div）高度的问题。这种现象会出现在多种布局场景中，尤其是在子容器高度大于父容器时。当父div没有设置固定高度而其内部的子div由于内容多而...

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

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

michiko98的博客

11-04

781

css margin越界父子元素

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

似水流年，举重若轻

02-15

471

margin超出子元素超出父元素

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

weixin_33869377的博客

04-20

123

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

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

2301_76892837的博客

03-07

741

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

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

weixin_42349568的博客

07-05

1585

<!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（未设置高度的情况下），不会根据子元素的高度而变化，另外，后面不需要浮动想在下一行显示的标签出现在浮动元素的后面。...

细说CSS中margin属性的使用

09-24

这意味着，即使父元素的宽度和高度不相等，只要子元素的`margin`左右和上下都设置为相同的百分比，它们在实际计算时仍然会保持一致。对于行内非替换元素（如`i`、`span`），`margin-top`和`margin-bottom`通常是...

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

Rich_77的博客

08-02

638

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

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

大连云鹏

03-04

749

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

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

@微你

08-04

395

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

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

muli`慕李

04-27

570

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

区块的高度随宽度变化

weixin_42789120的博客

09-16

206

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

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

dxj124的博客

11-28

539

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

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

Ray_Huang

08-30

2364

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

子元素的margin-top为什么会影响父元素

apeiziwei的博客

06-08

1651

子元素的margin-top影响父元素的原因及解决方案

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

snoto的专栏

12-25

4259

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

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