设置子元素的margin-top属性时可能会遇到的问题

最新推荐文章于 2024-02-19 21:38:32 发布
原创 最新推荐文章于 2024-02-19 21:38:32 发布 · 581 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文探讨了CSS中子元素的margin-top属性在特定条件下应用到父元素的现象，即Margin Collapsing，并提供了一种简单有效的解决方案——为父元素添加边框。

        在正常文档流下，子元素（块，独占一行的）直接写margin-top时，如果子元素或父元素不设置任何浮动以及定位的属性，或者父元素在不设置边框的情况下，此时会将margin-top属性值加在父元素身上。

        解决办法之一是给父元素加上边框！！！

html代码：

css代码： 

 实现的效果：

 给父元素加上边框后，此时实现的效果：

 

勤径涯舟
关注
Boostrap（未完待续）(六十三)
weixin_44730244的博客
05-11 1975
Boostrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局，移动端设备优先的WEB项目。基于jquery。适用于小型项目，因为boostrap很多样式都预设好了，所以大型项目还是尽量自己手写的好。 Bootstrap相当于就是它有许多现成的样式可以引用，你就需要添加个类名就行。不过理解原理，自己能够手动写一个更好了。 特色：1.响应式布局：我们不需要自己去写madia queries，系统已经帮我们写好了。只需要调用给我们的样式就行 2.基于flex的栅格系统 3.丰富的组件和工具方法 4.
CSS父子元素的margin-top
hr226的博客
08-10 231
一个容器的第一个子元素的margin-top会转移给父元素的margin-top 解决办法： ①父元素加上overflow：hidden； ②第一个子元素的margin-top变成父元素的padding-top； ③父元素加上border 。 ...
css中给子元素添加margin-top影响到父元素
ｊａｖａ实现一个简单的计算器的加减乘除功能
11-22 2133
css给子元素添加margin-top会影响到父元素
子类元素设置margin-top，父类元素一起移动的原因以及解决思路
qq_60614034的博客
09-25 1858
初学者，不要骂
解决子元素设置margin-top使父元素也跟着向下移动的问题
卿本无忧的博客
07-10 1174
解决子元素设置margin-top使父元素也跟着向下移动的问题
子元素设置margin-top，父元素也受影响
热门推荐
沫沫酱
12-09 2万+
外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。例子可以查看下面代码(IE下表现“正常”，标准浏览器下查看出现“bug”)：     子元素设置margin-top，父元素也受影响     * {         m
firefox margin-top失效的原因与解决办法
10-30
在Web开发过程中，我们可能会遇到这样一个问题：使用`margin-top`属性本来是为了实现元素的上边距效果，但在某些浏览器中，比如Firefox，这个属性似乎并没有按预期工作，导致上边距没有正确显示。这便是本篇文档要...
Firefox下margin-top会出错
12-02
在进行网页设计时，尤其是在使用Mozilla Firefox浏览器环境下，开发者可能会遇到一个常见的布局问题：当尝试通过CSS中的`margin-top`属性来调整某个元素的位置时，发现不仅目标元素发生了位移，其父级或兄弟元素的...
margin 负值引起的层级（z-index）问题
09-27
当元素设置了overflow属性，且值不为visible时，该元素会创建一个新的块格式化上下文，这会影响其子元素的定位，使其在新的层叠上下文中正确显示。 对于网页设计师来说，了解浏览器对CSS的不同解释以及如何利用这些...
margin:0 auto和margin-top同时存在，margin-top失效
最新发布
06-27
- 如果父容器设置了 `height: 100vh` 或固定高度，而子元素的 `margin-top` 设置后仍然无法看到预期效果，可能是因为布局空间被压缩，或者浏览器默认样式影响了渲染。 - 此时可以尝试将子元素包裹在一个额外的容器...
margin-top不要影响兄弟元素
03-08
另外，可能存在的情况是，当一个元素设置margin-top时，如果父元素没有边框或内边距，子元素的margin-top可能会穿透父元素，导致父元素和子元素的外边距合并，从而影响到父元素的兄弟元素。这种情况下，用户的观察...
子元素的margin-top为什么会影响父元素？
苏苏就是小苏苏的博客
02-18 3219
1.两个元素，当你为子元素设置margin-top的时候，你会发现什么呢？ 2.解决方法 父元素设置 1- overflow: hidden 2- display: inline-block;或者float布局 3- border: 1px solid transparent; 4- position: absolute
html margincalc居中,CSS设置居中的方案总结-超全
weixin_29014237的博客
06-24 502
块级元素居中 html代码部分child行内元素居中 html代码部分childweb前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯水平居中01 行内元素 text-align: center;.parent {text-align: center;}02 块级元素 margin: auto;(低版本浏览器还需要设置 text-align: ...
响应式网页开发(自适应页面)
桃之夭夭的博客
02-19 2637
1 响应式的概念(自适应页面)随着移动终端的兴起，多种页面规格出现，用户各种需求增加，我们需要通过响应式让用户在不同的终端看到接近相同的内容。响应式也叫作”自适应页面”，可以根据浏览设备的不同，改变不同的布局 文本 图片等的效果特点：使用一套html结构，根据终端检查变化(宽度),同时使用”媒体查询”,将不同宽度的CSS加入到不同的媒体查询中，随着页面宽度的变化，改变布局样式2. 设备的宽度。
bootstrap gutter 详解
jiaoqi6132的博客
07-02 3238
1.首先 gutter 是针对的是padding 他是grid 的封装 当我们一拿到这样的代码的时候，在row里面，我们一定会存在一些的疑问，那就是这是啥。 px-lg-2 这是什么 mx-lg-2这是什么。 1.p对应的是padding 2.m对应的是margin x和y 分辨对应是左右 上下 不同dom的设置对应它自己， lg 就是视图的大小 目前对于5.0中的g*开头的，4.5中是没有的详细的教程请查看 https://www.orchome.com/...
css3高度计算函数cal_CSS3 calc()会计算属性详解
weixin_30682905的博客
02-15 1993
前言正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法；calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。怎么使用calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题，而且还可...
子元素设置margin会影响父元素问题
ice-bear
01-21 2277
原因及解决
HTML+CSS 子元素的margin-top作用到了父元素上面
jinianling的博客
05-18 363
子元素的margin-top作用到了父元素上面解决方案
CSS 基础 笔记3
EM宝宝的博客
05-30 316
CSS 基础 笔记 Author : 朱盟 |吃火星的宝宝 TIME: 2019/5/30 学习的第4天 GIT HUB ： embaobao https://github.com/embaobao/EM Email:1132067567@qq.com 优快云： https://blog.youkuaiyun.com/embaobao 博客园： https://www.cnblogs.com/embaob...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值