子元素的外边距作用在父元素

最新推荐文章于 2022-03-21 14:22:20 发布
最新推荐文章于 2022-03-21 14:22:20 发布
阅读量3k 收藏
点赞数 1
分类专栏： html/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherry_zhang18/article/details/86233035
版权


需要添加代码

 #d2:before{
        content:"";/*生成空元素*/
        display:table;/*表现形式为 table*/
      }
即：

康康不是只喵
关注
专栏目录
父元素与子元素之间的margin-top问题(css hack)
09-25
5. **使用绝对定位**：将父元素或子元素设置为绝对定位（`position: absolute`）可以阻止外边距折叠，但会脱离正常的文档流，可能需要调整其他元素的位置。 ```css .box2 { position: absolute; /* 新增 */ top...
解决子元素设置margin-top使父元素也跟着向下移动的问题
最新发布
卿本无忧的博客
07-10 834
解决子元素设置margin-top使父元素也跟着向下移动的问题
关于父元素和子元素的margin-top问题
weixin_30618985的博客
06-07 79
昨天试着自己写个web简历，碰到的第一个问题竟然是margin-top的疑问，下面是经过百度后的一些理解和记录，仅作自我学习之用。 hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 <div class="box1"> <div class=...
CSS子元素的内外边距会作用到父元素的问题
qq_33200168的博客
11-08 2122
今天写CSS微场景的时候遇到了一个问题，就是如果你的一个父级元素没有内外边框那么你第一个子元素的内外边框就会作用到父级元素的身上。 解决办法就是给父级加一个和背景颜色一样的边框，1px就行，在或者就是一像素的内边距或者外边距，不过说实话在CSS里即使是一像素，也很明显。 在或者就直接给元素套一个定位元素吧。 ...
子元素和父元素相邻的垂直外边距（margin），子元素的外边距（margin）会传递到父元素上
lu10505的博客
01-04 596
解决方法如下几种 第一：在父元素下加入table元素 <table></table> 第二：给父级添加clearfix的类名，使用before伪类清楚浮动 clearfix:before{ content: ''; display: table; clear: both; } ...
盒子模型+给子元素添加外边距父元素也会动的解决办法
YiLin_Classics的博客
03-21 934
盒子模型盒子模型的组成部分内边距外边距 盒子模型的组成部分 盒子模型的组成部分： 内容区域：是css里面自己设置的宽度和高度 内边距（padding）：是内容和边框之间的距离 边框（border）：元素的一个边缘位置 外边距（margin）：元素与元素之间的距离 内边距 padding：内容和边距之间的距离 取值个数 内边距情况 V1 实现四个方向的内边距 V1 V2 V1上下内边距，V2左右内边距 V1 V2
详解css外边距折叠（margin collapsing）
09-22
2. 父元素与第一个或最后一个子元素之间的外边距折叠：若父元素的上边距直接与第一个子元素的上边距接触或父元素的下边距与最后一个子元素的下边距接触，则这些外边距也会折叠。要避免这种折叠，可以给父元素或者子...
原生JS获取元素集合的子元素宽度实例
10-20
右边元素使用position:absolute和right:0来确保它总是浮动在父元素的右侧。 接下来是JavaScript部分的核心内容。通过使用document.getElementsByClassName方法，我们获取到了所有类名为"item"的元素集合。之后，...
css 空白外边距互相叠加的解决方法
09-25
这样做可以阻止外边距合并，因为边框的存在使`div`有了一个边界，其高度不再只依赖于子元素的外边距。 2. **设置内边距填充**：为外围元素（同样指`div`）添加内边距，如`padding: 1px;`。内边距会占据一定的空间，...
如何解决外边距margin叠加的问题探讨
09-22
在CSS布局中，经常会遇到块级元素垂直外边距（margin）发生叠加的问题，这通常称为margin叠加或外边距折叠。当两个或多个毗邻的块级元素垂直方向上的margin相遇时，它们会以较大者的margin值作为一个统一的margin值...
父元素和子元素外边距重合
qq_41519442的博客
07-20 846
环境描述：一个父div里有一个子div，当子div使用margin-top的时候，父类div也会向下移，解决方案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>...
由父子元素margin说开——外边距塌陷（margin-collapse）
sinat_22996989的博客
08-03 7934
布局时往往要遇到div嵌套显示效果，如下： 假设蓝色的为div1，黄色的为div2，为了实现上图所示布局，我的想法是为demo1设置margin:0px auto; demo2位置margin:30px,auto; 代码如下： body{ background-color: darkgray; } *{ margin:0px;
子元素设置margin-top，父元素也受影响
热门推荐
沫沫酱
12-09 2万+
外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：     子元素设置margin-top，父元素也受影响     * {         m
css中的子元素设置margin-top或者margin-bottom作用到父元素上的问题
weixin_39855431的博客
04-26 4872
写页面的时候要实现这样一个效果要求：图标之间有一条线进行连接，最上边和最下边的图标没有线进行连接，数据动态加载图标和线也动态生成一、第一种实现方法横着的每条数据是一个父级，然后所有的数据又是一个父级，然后给最外层的父级加border-left,然后每条数据设置一个margin-left的负值，每条数据之间的间距用margin-bottom来设置，具体实现如下&lt;!doctype html&gt...
子元素设置margin会影响父元素问题
ice-bear
01-21 2137
原因及解决
给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值的解决办法
珂鸣玉的博客
02-25 948
bfc详细介绍参照https://blog.csdn.net/AmberWu/article/details/79543896 本文介绍给子元素盒子增加垂直外边距margin-top时，会导致父元素盒子与子元素盒子边界重叠而导致父元素盒子也往下走 转载自https://blog.csdn.net/oiu1010110/article/details/53192048 我们div嵌套时会出现外...
子元素上的margin作用到了父元素上
nicexibeidage的博客
05-14 871
margin外边距合并详解: 外边距合并现象在网页布局中非常的常见，必须对此有明确的把握，以此做到未雨绸缪，否则可能影响工作效率，甚至严重阻碍项目的进度。在网络上已经有大量的相关文章，下面结合实例代码对margin外边距合并做一下总结。 外边距合并概念: 相邻的两个或者多个外边距在垂直方向上合并成一个外边距，这就是所谓的外边距合并。 水平方向不存在此现象。 外边距合并产生条件: （1）
html外边距属性有哪些,css外边距属性有哪些？都有哪些用处？（详解）
weixin_36342356的博客
06-08 741
我们在进行网页页面布局时，相信做过页面设计的朋友都知道，margin属性是css中非常重要的一个样式属性，那么有的新手可能就会问margin属性是什么？css样式中的margin也就是css中外边距外间距属性，顾名思义，就是控制div块或者各元素之间上下左右的距离，显然margin在css中的作用不容小觑。本篇文章就给新手小白介绍关于css margin属性的具体用法。希望对大家有所帮助。下面我们...
vue2子元素在父盒子排列换行
05-25
你可以使用 CSS 的 `flexbox` 布局来实现子元素在父盒子中排列换行。具体来说，需要给父盒子设置 `display: flex;` 和 `flex-wrap: wrap;` 属性，让子元素能够在父盒子中自动换行。例如： ```html <div class="parent"> <div class="child">子元素1</div> <div class="child">子元素2</div> <div class="child">子元素3</div> <div class="child">子元素4</div> <div class="child">子元素5</div> <div class="child">子元素6</div> </div> ``` ```css .parent { display: flex; flex-wrap: wrap; } .child { width: 100px; height: 100px; margin: 10px; background-color: #ccc; } ``` 上面的代码中，每个子元素都有固定的宽度和高度，并且设置了一定的外边距。当子元素数量超过父盒子的宽度时，子元素会自动换行。你可以根据实际情况调整子元素和父盒子的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值