margin-top传递（与其他兄弟元素上下间有距离产生但是在元素本身没发现问题 ）

最新推荐文章于 2022-12-09 21:00:00 发布
最新推荐文章于 2022-12-09 21:00:00 发布
阅读量349 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42497127/article/details/121471621
版权

子级的margin-top传递给父级及祖先元素
一般出现的现象是与其他兄弟元素上下间有距离产生但是在元素本身没发现问题
解决办法：border
BFC - 标准浏览器的特性（让触发BFC的元素进行计算后独立的二次渲染）

解决方式2：在父级中添加padding

解决方式3：推荐使用。
overflow: hidden;

小提示：
能用padding代替的就不要用margin 加wx wzq85006194

王先生6666
关注
day04 CSS选择器 盒模型外边距和塌陷问题，元素分类和转换，溢出处理属性。
m0_54022091的博客
09-20 233
1、css选择器进阶(6个) 2、css盒模型--外边距 3、css盒模型外边距塌陷问题 4、元素的分类和转换 5、溢出处理的属性 盒模型：布局思路 盒模型组成 = 外边距margin+边框border+ 内边距padding + 有效内容width,height width,height min-width max-width min-height max-height width:auto ;（不会溢出） width:100%;(会溢出) padding: 撑大盒子 外扩型 W
前端面试-CSS
wanglu458512的博客
09-19 3034
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
html上外边距是,margin-top css设置对象上外边距间距（上外补白）
weixin_33514163的博客
06-04 1225
布局对象与上一个对象盒子间距间隔属性margin-top简称css上边距设置。margin-top与padding-top有相同之处都是设置边距间隔属性，margin-top设置对象上边的外距离，对象与上一个对象之间间隔，而padding-top设置上边框到内容之间间隔间距。div css margin-top理解说明图1、应用地方html网页布局中，会常常布局上下结构对象盒子有一定间隔间距，就像...
div兄弟节点中后面div给margin-top会被上一个兄弟节点遮挡住的原因以及解决方案
qq_40128591的博客
04-18 2330
如图： 按照正常思路我们我们是想让兄弟节点二显示在兄弟节点一上面。但是现在我们看到的效果是我们的兄弟节点被兄弟节点一给盖住了。而且一般来说我们的后面节点z-index:;值都会比前面的高，但是却会造成这种效果。 造成原因：可能是你的节点一设置了position：relative;属性，但是你的第二个节点没有设置所以才会这样。 解决方法：给第二个也加一个position:relativ...
html在同级元素下方添加,CSS 同级元素position:fixed和margin-top共同使用的问题
weixin_36453829的博客
06-19 462
问题描述想用CSS实现顶部固定的效果：尝试margin-top加position:fixed实现，代码如下：Test.header {position: fixed;height: 20px;width: 100%;}.content {margin-top: 30px;}.aside {float: left;width: 200px;background: orange;}.main {ove...
CSS中子元素margin-top对父元素产生作用的问题
Hello博客
10-16 978
问题 在实际开发中遇到一个问题，子元素想通过margin-top留白时，会把父元素也拉下来。 问题图片如下： 问题代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&
元素之间设置margin的影响及原因
m0_45251556的博客
04-08 1305
在写网页布局时通常会遇见给元素之间设置margin无效或其他影响，所以简单记录下： 影响： 1.父子、兄弟元素间设置垂直方向上的margin时，margin会发生重叠，只选取最大值 2.父子元素之间，给子元素设置margin-top时，子元素会影响父元素，带动父元素下移，影响父元素位置 注意：margin带来的影响只会发生在块级元素之间，因为主要是垂直方向上的影响 原因： BFC机制的规定： W3C中指出： 在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直排列。 两个兄弟框之间的
同行兄弟出去面试题的汇总 2020-7-19
weixin_48116269的博客
10-20 710
1.普通数据类型 (1)普通数据类型有哪些? ​ 字符串型string： 数值型number,：undefined：null,：布尔型boolean 复杂数据类型有Object Array Date (2如何检测类型? console.log(typeof data) instanceof Array.isArry() (3如何转换数据类型? 转字符串 ​ 数据.toString() ​ String(数据) ​ 隐式转换:数据+’ ’ Join(‘分割符’) 转数值 Number必须是纯数字(数据)
HTML-CSS笔记
Dexter7的博客
08-06 560
HTML5-CSS3 HTML元素的lang属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> html元素是HTML...
前端面试题---html/css
weixin_44501366的博客
10-07 1267
!DOCTYPE 标签：head：body:base:可以用来统一设置当前页面上的超链接的跳转方式< base >标签为页面上的所有链接规定默认地址或默认目标使用了 < base > 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。 使用< base >标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 < a >、< img >、< li
常见margin-top失效的情况
热门推荐
三月半和蒲公英的博客
07-16 1万+
关于margin-top失效, 常出现两种情况： （一）兄弟元素之间margin-top失效 先看下面代码： &lt;div&gt;        &lt;div  class="box1"&gt; float: left &lt;/div&gt;        &lt;div  class="box2"&gt; clear:both; margin-top:20px; &lt;/div
CSS中margin-top对父级元素产生作用的问题
谢家老树
10-14 8487
CSS中margin-top对父级元素产生作用的问题在页面重构中，利用margin进行定位非常常见，然而margin-top这个属性经常会给我们带来一定的困扰，有时候不起作用，还把父层“拉”了下来，如图所示： 代码如下：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test2</title
同级元素由于position:fixed;引起的margin-top影响同级元素的问题
weixin_42138029的博客
06-04 1604
问题描述：代码：解决办法：在同级元素的父级元素上加上padding-top:1px;
同级元素和父子间元素margin重叠问题和解决方案
CaseyWei
09-17 2379
场景一：两个同级元素上边元素的margin-bottom和下边元素margin-top会产生重叠。 如下边html，id为one的div和id为two的div之间距离应该是50px，但真实效果是40px，因为margin重叠了，margin值取他们之间的最大值。 <html> <head> <style type="text/css"> ...
CSS: margin—相邻块元素垂直外边距的合并、嵌套块元素垂直外边距的塌陷
weixin_43932309的博客
12-09 1198
相邻块元素垂直外边距的合并现象两种解法； 嵌套块元素垂直外边距的塌陷现象四种解法
css盒模型
路明凡的博客
08-10 307
css盒子模型的基本概念：标准模型+ie模型 标准模型的宽高是content的宽高，不包括padding和border。    ie模型的宽高是包括padding和border的 css是如何设置这两种模型的 box-sizing：content-box (标准) box-sizing：border-box（ie） js如何获得盒子模型对应的宽高 dom.styl...
兄弟元素margin垂直共享
I am a fool.
08-10 395
兄弟元素的margin在水平上是线性叠加。 而在竖直方向上是共享的。
如何相对于兄弟元素实现垂直居中
丁哒哒的博客
05-11 876
之前遇到的垂直居中大部分都是相对于父元素居中，方法也很多，如flex、margin、absolute等等，之前也总结过了，这里就不多赘述，但是这次的需求是相对于兄弟元素实现垂直居中，还是花费了一些时间才解决的（也可能是由于思维定势，一时半会没想起来） 一、需求效果 可以看到右侧的按钮，是相对于左侧的文字内容垂直居中的，而且内容的行数可能是一行或者两行 二、方法尝试（使用flex） 在父元素上加上： display: flex; align-items: center;.
学习笔记——margin-top，margin-bottom之间的合并问题
qq_41339126的博客
03-20 2957
CSS中，margin-top和margin-botttom有一些特殊性。它们会在某种情况之间相互合并，并且会将值最大的那个当作外边距的值。 1. margin-top具有继承性 当两个盒子是父子关系时，对父元素设置margin-top,子元素也相当于有了相同的margin-top。 .box1 { margin-top: 20px; width: 200px; heig..
当子元素的margin-top传递到父元素上时,以下哪个属性可以解决
最新发布
04-06
'\xe5\xbd\x93\xe5\xad\x90\xe5\x85\x83\xe7\xb4\xa0\xe7\x9a\x84margin-top\xe4\xbc\xa0\xe9\x80\x92\xe5\x88\xb0\xe7\x88\xb6\xe5\x85\x83\xe7\xb4\xa0\xe4\xb8\x8a'这句话的意思是，子元素的margin-top传递到父...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值