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

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


需要添加代码

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

康康不是只喵
关注
专栏目录
css 父子元素margin,CSS外边距合并：子元素的margin-top外边距被作用在父元素
weixin_35891744的博客
08-04 1005
[摘要]CSS外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。不理解此规范的话，会在前端布局中出现异常问题，本文深入浅出学习此规范，并提供解决办法。不得不说前端是一个水很深的行业，虽然起点低，稍微一学就能入门；但是很多实操型的知识如各种兼容性、规范性问题不在实际操作中遇到是无法深刻的理解的，笔者就遇到了CSS外边距合并这一看似非主流却很主流的问题。问题描述：笔者想得到一个两个内套的...
子元素在父元素水平垂直居中方法整理
m0_57712926的博客
10-07 885
文章目录前言一、方案一1. 思路2. 代码演示二、方案二1. 思路2. 代码演示三、方案三1. 思路2. 代码演示四、方案四1. 思路2. 代码演示三、 效果演示总结 前言 在网页的布局中，最常见的一种效果就是让子元素在父元素中水平垂直居中效果，虽说功能简单，但你有几种解决方式呢？今天整理了几种解决方式，一起来看下吧~ 一、方案一 1. 思路 利用父元素相对定位，子元素决定定位，计算子元素与父元素之间的距离。控制子元素的top和left值将其定位到父元素的正中央位置。 缺点：如果子元素或者父元
子元素和父元素相邻的垂直外边距（margin），子元素的外边距（margin）会传递到父元素上
lu10505的博客
01-04 596
解决方法如下几种 第一：在父元素下加入table元素 <table></table> 第二：给父级添加clearfix的类名，使用before伪类清楚浮动 clearfix:before{ content: ''; display: table; clear: both; } ...
子元素margin-top属性传递给父元素的问题
湛庐无方
10-23 3560
问题描述： 一个父包含框包含一个子元素。给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走，而子元素和父元素的边距则没有发生变化。 html结构： css样式： .box1{height:400px;background:#fad;} .box1_1{height:100px;margin-top:50px;background:#ade;} 解
css中子元素设置margin-top为什么影响了父元素
weixin_42116120的博客
10-06 662
<style type="text/css"> *{ margin: 0px; padding: 0px;} .show { margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } .show h2 { margin-top: 50px; cursor: pointer; } </style> <body> <di
margin传递，子元素的上下margin会传递给父级
weixin_34004750的博客
02-28 141
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #box{ background:red;} 8 #div{width:200px;hei...
外边距的特殊效果
limy_cxm的博客
02-27 252
1.外边距合并 当两个垂直外边距相遇时，他们将合并为一个，最终取决于两个外边距中距离较大的那个。 如果两个外边距相遇时值相等，那么取其中一个值。 2.外边距的溢出 在某些条件下，为子元素设置上外边距时，有可能会作用到父元素上。 1.父元素没有上边框 2.为子元素设置上外边距时 2.在d2中嵌套一个子元素div,id=”d3”,设置其尺寸为100*100，并...
父元素与子元素之间的margin-top问题(css hack)
09-25
5. **使用绝对定位**：将父元素或子元素设置为绝对定位（`position: absolute`）可以阻止外边距折叠，但会脱离正常的文档流，可能需要调整其他元素的位置。 ```css .box2 { position: absolute; /* 新增 */ top...
使用HTML开发商业网站-块元素垂直外边距的合并课件.pptx
07-10
边框起到了隔离的作用，阻止了子元素的外边距与父元素的外边距合并。这也是为什么有时在布局中添加1px的透明边框或者微小的内边距可以解决间距问题的原因。 3. **如何控制外边距合并** 要控制或防止外边距合并，...
CSS 嵌套块元素垂直外边距的塌陷解决方案
鸭绒的博客
07-07 2367
文章目录1. 什么是嵌套块元素垂直外边距的塌陷？2. 解决方案 1. 什么是嵌套块元素垂直外边距的塌陷？ 对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷相对较大的外边距值，而子元素没有实现上外边距效果。 1.在只给父元素加上上外边距时能正常： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta na
关于父元素和子元素的margin-top问题
weixin_30618985的博客
06-07 79
昨天试着自己写个web简历，碰到的第一个问题竟然是margin-top的疑问，下面是经过百度后的一些理解和记录，仅作自我学习之用。 hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 <div class="box1"> <div class=...
HTML & CSS 之小白再续前缘
weixin_34417200的博客
06-29 99
CSS 盒子模型 （点击查看官方解释） 实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 content 内容区域 padding 内边距 border 边框 margin 外边距 并且margin, border, padding分别有上下左右4个值 如上图所示，可以很容易的得出盒子的大小...
css外边距合并
lijie_0825的博客
12-06 291
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 以下皆为这里部分内容的引用，其实是W3C的相应规则的翻译。 margin折叠的产生有几个条件： 这些margin都处于普通流中，并在同一个BFC中；这些margin没有被非空内容、padding、border 或 clear 分
css塌陷问题（当给子元素设置外边距后父元素也跟着一起偏移？）
m0_56212431的博客
09-12 1249
问题概述 对于两个嵌套关系的块级元素，如果父元素没有设置上内边距或边框，那么父元素的上外边距会与子元素的上外边距发生合并，合并之后的外边距为两者中的较大者。因此，当给子元素设置外边距时，会同时导致父元素一起往下偏移，引发塌陷问题。 问题解决 方法1：为父元素定义上边框 方法2：为父元素定义上内边距 方法3：为父元素添加overflow:hidden ...
[css] 外边距合并（折叠） / 子元素margin-top影响父级margin-top的处理
刘师傅的博客
11-09 263
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting co...
CSS子元素的内外边距会作用到父元素的问题
qq_33200168的博客
11-08 2121
今天写CSS微场景的时候遇到了一个问题，就是如果你的一个父级元素没有内外边框那么你第一个子元素的内外边框就会作用到父级元素的身上。 解决办法就是给父级加一个和背景颜色一样的边框，1px就行，在或者就是一像素的内边距或者外边距，不过说实话在CSS里即使是一像素，也很明显。 在或者就直接给元素套一个定位元素吧。 ...
子元素设置margin-top，父元素也受影响
热门推荐
沫沫酱
12-09 2万+
外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：     子元素设置margin-top，父元素也受影响     * {         m
父元素和子元素外边距重合
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导致的父元素边距异常
sofeien的专栏
02-08 1878
*{margin:0;padding:0} .box { background-color:gray; } .box:before{ display: table; content: ''; }
vue2子元素在父盒子排列换行
最新发布
05-25
你可以使用 CSS 的 `flexbox` 布局来...上面的代码中，每个子元素都有固定的宽度和高度，并且设置了一定的外边距。当子元素数量超过父盒子的宽度时，子元素会自动换行。你可以根据实际情况调整子元素和父盒子的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值