margin无效？解决margin原点失效的问题

最新推荐文章于 2024-03-29 19:28:12 发布
原创 最新推荐文章于 2024-03-29 19:28:12 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了CSS中margin属性在不同情况下的表现，特别是在没有内容或边框的父元素上设置margin时的行为。通过实例展示了如何使margin生效。

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

在页面布局时，经常用到margin，但是今天突然碰到了一个问题

我给了两个div，一个外层的main，内层的inside设置了margin，页面看不出内层inside的margin有什么效果




给.main加一个border:1px solid black的边框，结果如下


或者给.main加一点内容


从以上几个分析可以知道，margin的有效的原点会从父元素开始往上找，碰到有内容或者有border就会生效
前端小伙
关注
margin 无效的情形
liuhao9999的博客
03-23 3330
（1）display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素，垂直margin有效，并且没有ma rgin合并的问题。 （2）表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。 （3）绝对定位元素非定位方位的margin值“无效”。 （4）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。 ...
Matlab绘图时关于xtick的相关问题
warnerchang的博客
11-14 5432
有时候，小编在绘图时会碰见如下的问题，将xtick的原点始终限制在原点处会出现如下问题： 如上图中左边子图所示，横坐标的坐标值出现在了横坐标的上方，而不是原本的横坐标下方，这在matlab中是自动调整的，不能任意修改的，因此，小编简单地分析了一下，认为这个原因主要是由于y轴的坐标值上下限不同引起的，将y轴的上下限调整为一致时则横坐标的坐标值就会出现在坐标下方，代码如下： % code 1 subplot(1,2,1) plot(-10:5,-10:5); set(gca,'XAxisLocati.
网页设计：Css大坑之一，设置margin无效
热门推荐
qq_44131760的博客
03-07 1万+
出现这个问题基本和垂直外边距的特性有关。注意是垂直外边距margin-top/bottom啊，不是水平外边距。 垂直外边距特性： 1.兄弟盒子的垂直外边距会重合，取兄弟元素设置的margin属性最大值。比如上面的盒子设置margin-bottom:200px，下面盒子设置margin-top:100px，那最终两个盒子隔开距离是200px。 2.父子盒子的垂直外边距会传递，在一定的条件下，由子元素margin-top属性会单方向传递给父元素的margin-top属性。 下面会进行实验，看看margin具体是
CSS的margin失效、塌陷和兼容问题
一杯清泉
07-06 2102
在标准文档流中，竖直方向的margin不叠加，以较大的为准，水平方向不影响，可以叠加。注意是标准文档流，不是标准文档流不存在塌陷现象。 要想使p的margin生效，需要给父布局的div添加border，否则margin无效。margin表示兄弟和兄弟之间的距离，最好不要使用margin表示父子之间的距离，要善于使用padding。 四、margin的IE6兼容问题 1、margin双倍问题 浮动方向和margin方向相反，左浮动+右margin2、IE6的三像素
margin出bug---margin失效
qq_44859233的博客
07-06 1699
我们在制作网页的时候，经常遇到margin无效的情况，出现这样的bug我们该怎样解决呢，以下我整理了以下情况，希望对大家有用。 （1）表格中的和元素或者设置display计算值是table-cell或table-row元素的margin无效。 但是，如果计算值是table-caption、table或者inline-table则没有问题，可以通过margin控制外边距，甚至::first-letter伪元素也可以解析margin。 （2）display计算值inline的非替换元素的垂直margin是无效的
margin塌陷----margin属性无效问题
weixin_45705239的博客
03-29 467
的会作用在父元素上**，最后一个子元素下 margin** 会作用在父元素上。所以可能你认为设置了属性没有用，实则是作用在了父元素上。
2020-12-17 html、css面试题3: 水平垂直居中，左右固定中间自适应 三栏布局，静态布局、自适应布局、流式布局、响应式布局、弹性布局，IE中常见的兼容性问题，清空数组的方法
Amanda&Rachel的博客
12-17 568
11.如何让一个盒子水平垂直居中 1、 如何让一个盒子水平垂直居中 ①定位：（常用方法,推荐） position:absolute; position:relative; left:值; top:值; ②display:table-cell; ③外边距：margin-left:值; margin-top:值; ④margin:auto;（不兼容低版本的IE浏览器） ⑤弹性盒模型：display:flex; justify-content:conter; align-itens:center; ⑥用trans
Flutter 笔记 | Flutter 容器组件
川峰的博客
05-25 2001
Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flut
Qt开发经验总结
草上爬的博客
12-02 1万+
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
室内无GPS环境下如何实现定距离飞行？
最新发布
07-13
- **精度**：视觉SLAM在纹理丰富的环境中效果较好，在弱纹理或动态物体多的环境中可能失效，可考虑融合IMU数据提高鲁棒性。 - **安全**：室内飞行需设置避障功能，可使用超声波或TOF传感器实时检测障碍物。 ### 六...
margin-left和right失效(斯芬克斯)之谜
01-24
一般很多人遇到的margin失效都是纵向上面的: 一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释); 另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing)）。 那么margin-left/right怎么又会失效的呢？假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋，就会了解了：哦，又是haslayout啊。 我们来看看具体的失效代码：
css布局绝对定位下margin失效的解决方法
12-09
如果是要垂直居中，也是一样的方法，即设置top:50%,然后margin-top的值为层的高度的一半 position:absolute; left:50%; top:50%; margin-top:-13px; margin-left:-58px; width:116px; height:25px; z-index:999999;
margin，不起作用
zxp_smile的博客
11-15 508
inline-block，点击切换，下面的高度会变（和border也有关），margin，不起作用
css【详解】外边距 margin（含margin百分比值，margin负值，margin合并，margin：auto，margin失效）
朝阳39的博客
03-23 5070
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2.父级和第一个/最后一个子元素 阻止margin-top合并的方法 阻止margin-bottom合并的方法 3.空块级元素的margin合并 阻止空div元素的margin合并 margin合并的计算规则 margin合并的重要意义 margin:auto的填充规则 margin失效的场景 margin属性的值为百分比值时，无论是水平方向还是垂直方向，都是相对宽度计算的 margin合并的场景 ...
关于margin-right失效的问题
张大晴的博客
05-16 1万+
关于margin-right失效的问题：浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下  如果子容器的宽度能够被容纳  设置margin-right是没有用的...
margin-top不生效原因
qq_45208940的博客
11-17 496
时，它们的垂直边距会发生合并，即取其中较大的一个作为最终的边距值。但是，如果其中一个元素具有边框（border）、填充（padding）或内联内容（例如文字），那么它的边距将不会与相邻元素的边距合并。属性或其他具有边框、填充或内联内容的 CSS 属性来防止边距合并。这个边框会阻止它的上方边距（当两个垂直相邻的元素都具有。
你的margin是不是也没有生效？
qq_64157187的博客
10-14 253
css
解决 margin-top 不好使的情况
YKenan的博客
11-14 413
解决 margin-top 不好使的情况1. 原因2. 解决 1. 原因 基本上是由于上个标签浮动导致的 2. 解决 在该标签的父标签中添加如下 css clear: both; overflow:hidden; ...
margin-top 不生效的原因和解决方法
kodmoqn的博客
08-02 564
margin-top 不生效的原因和解决方法
解决HTML嵌套div中margin失效问题及IE特性解释
- 设置`display`属性为`inline-block`，虽然这通常不会改变BFC，但在此场景下能解决问题。 - 当`overflow`属性设置为`hidden`、`auto`或`scroll`时，也会创建一个新的BFC。 2. **调整父元素的`border`或`padding`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值