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

最新推荐文章于 2023-10-14 14:08:38 发布
最新推荐文章于 2023-10-14 14:08:38 发布
阅读量877 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21767263/article/details/58175228
版权

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

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




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


或者给.main加一点内容


从以上几个分析可以知道，margin的有效的原点会从父元素开始往上找，碰到有内容或者有border就会生效
前端小伙
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
margin 无效的情形
liuhao9999的博客
03-23 3057
（1）display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素，垂直margin有效，并且没有ma rgin合并的问题。 （2）表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。 （3）绝对定位元素非定位方位的margin值“无效”。 （4）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。 ...
css布局绝对定位下margin失效的解决方法
09-25
绝对定位层下margin:auto会失效，这时设置left:50%，然后margin-left的值为层的宽度的一半，就可在达到margin:auto的效果
关于嵌套块元素塌陷问题和块元素外边距失效问题的个人解决经验
NEXT00的博客
01-16 252
子块导致父块下沉和float:left的坑
css右外边距失效问题解释以及解决办法
阿牛哥的博客
04-18 823
css右外边距失效问题解释以及解决办法
winform margin不生效_Laraver-运行 npm run watch-poll 后样式不改变
weixin_39717029的博客
12-12 778
先说解决方案吧：我的是 chrome 浏览器，按 F12 打开调试模式找到 Network，把 “Disable cache”勾选上，再次刷新页面，接下来是见证奇迹的时刻，样式有改变了。跟着，我来说下这无语的问题的由来：来源： L01 Laravel 教程 - Web 开发实战入门 ( Laravel 5.7 ) - 4.2. 样式美化根据教程，成功执行了 npm run watch-poll ，...
使用zoom解决IE6 margin无效BUG
09-25
IE6 margin无效，解决方法有很多，下面有个很不错的解决方法，就是在最外层加上一个div盒子加上zoom:1值，感兴趣的朋友可以参考下
IE6,IE7浏览器下 margin 无效的解决方法
09-25
请注意，以上三种方法中选择任意一种即可解决问题，无需全部应用。具体使用哪种方法，应根据实际项目需求和兼容性考虑。 理解`hasLayout`的工作原理对于解决IE浏览器中的布局问题至关重要。`hasLayout`可以通过多种...
margin失效情形解析
ylleve的博客
02-11 4742
margin属性在以下情况下会失效 display计算值为inline的垂直margin无效 <p style="margin-top: 40px;display: inline;">content</p> 表格中的tr和td元素或者display计算值为table-cell或table-row的元素 margin 合并的时候，更改 margin 值可能是没有效果的。以...
你的margin是不是也没有生效？
最新发布
qq_64157187的博客
10-14 137
css
[Web前端] Margin 失效问题, 设置了 Margin 却不见效果, 解决方案.
诺尔的博客
03-07 3561
首先演示下: .box1{ width: 300px; height: 300px; } .box2{ width: 200px; height: 200px; } .box3{ width: 100px; height: 100px; } .border-with{ border: solid 1px pink; } .padding-with{ padding: 1px; } .style-pink{ background-colo
C#margin属性
Sunny_love_you的博客
04-26 4798
winform 里Control.Margin 属性到底是干嘛的？
weixin_30633405的博客
12-10 1314
winform 里Control.Margin 属性到底是干嘛的？在webform 里是设置了margin属性，可以指定与上下左右控件间的距离。但是在winform里却没有这个作用，他的作用是：在布局的时候，设置了改属性后，可以通过拖动来准确设置两个控件间的距离。参考资料：演练：使用 Padding、Margins 和 AutoSize 属性对 Windows 窗体控件进行布局 http://m...
margin，不起作用
zxp_smile的博客
11-15 374
inline-block，点击切换，下面的高度会变（和border也有关），margin，不起作用
margin-top 不生效的原因和解决方法
kodmoqn的博客
08-02 490
margin-top 不生效的原因和解决方法
设置 margin 的上下和设置宽高无效，其他有效的元素有哪些？
陈浩然哦 的博客
04-13 2516
设置 margin 的上下和设置宽高无效，其他有效的元素有哪些？ 1、和其他元素都在一行上； 2、高和外边距不可改变； 3、宽度就是它的文字或图片的宽度，不可改变； 4、设置宽度width无效。 5、设置高度height无效，可以通过line-height来设置； 6、设置margin只有左右margin有效，上下无效； 7、设置padding只有左右padding有效，上下则无效。注意元素范...
如何解决 margin“塌陷”？
05-25
要解决Margin塌陷，可以采用以下方法： 1. 为父元素添加 `border` 或 `padding`。这样可以防止父元素和子元素的上边距合并。 2. 将父元素的 `overflow` 属性设置为 `hidden` 或 `auto`。这样也可以防止父元素和子...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值