margin-right、margin-bottom设置不起作用？

最新推荐文章于 2025-12-11 14:44:28 发布
原创 最新推荐文章于 2025-12-11 14:44:28 发布 · 6.4k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文提出一个关于浏览器渲染方向的猜想并待验证：浏览器默认从左向右渲染元素，且div.box默认为左上对齐，这导致margin-right与margin-bottom在某些情况下可能不起作用。

猜想，待验证：

浏览器默认是从左向右渲染

一个div .box默认是左上对齐，所以margin-right、margin-bottom设置不起作用


html bottom没有效果,css 设置margin-top或margin-bottom失效不取作用的解决方法
weixin_29063035的博客
06-03 6973
首先来看一个案例：.bottom-box{margin-top:30px;}我设置了margin-top属性，我的上边距应该距离父元素为30px;可是结果如何呢？结果并不是class为bottom-box的div上边距离父元素30px;而是距离body元素30px;什么原因呢？当个子元素设置margin-top属性时，如何父元素没有设置padding属性，即padding属性为0，那么会出现以上这...
CSS_为什么margin-bottom经常无效，或者无法实现子div底部贴边父div？
Chill Lyn
09-16 5633
首先我们定义两个div，一大一小，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
子元素设置margin-top和margin-bottom无效，外边距折叠导致父元素移动
阿花的博客
03-28 4220
1.为外层元素或者内层元素设置边框（border:1px solid transparent） 2.为外层元素设置overflow:hidden属性 3.为外层元素设置padding值代替内层元素的margin值 4.内层元素或者外层元素浮动：float：left或者设置绝对定位display：absolute，或者改为行内块元素：display:inline-block 5.内层元素加一点点padding值（padding:1px）
CSS中的margin-bottom属性是否无效？
TdMaster的博客
10-02 1488
综上所述，CSS中的margin-bottom属性是有效的，但在某些情况下可能会出现似乎无效的情况。内容溢出：如果元素的内容溢出了其容器，那么margin-bottom属性可能无效，因为溢出的内容不会影响元素的尺寸和位置。如果你在浏览器中打开HTML文件并检查元素的样式，你会发现.box元素的下边距（margin-bottom）确实被正确地应用了。相邻元素：如果两个相邻的元素之间的margin-bottom属性值重叠，那么较大的值会覆盖较小的值。解决方案是使用适当的技术（例如添加空的。
ios手机margin-bottom失效问题
mingquantingxue的博客
11-13 1841
问题 小程序中的页面设置margin-bottom，在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone手机中margin-bottom会失效。 原因 从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值为8pt。 如果一个View是ViewController的rootview，系统会自动设置和管理margins，top和bottom。margins
对行内元素设置padding和margin不起作用
weixin_44645309的博客
12-29 1401
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、对行内元素设置padding和margin二、使用步骤1.引入库2.读入数据总结 前言 看了表严肃表哥的电商网站项目，自己动手亲自实现了一遍，前前后后遇到了几个问题，特此总结一下。 一、对行内元素设置padding和margin 代码： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="
详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)
IT_Helianthus的博客
05-20 9390
文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距，该属性有多个值： 值 描述 auto 浏览器设置的上外边距。 length 定义固定的上外边距。默认值是 0。允许使用负值。 % 定义基于父对象总高...
margin-left与left、margin-right与right区别
weixin_39119072的博客
04-14 3596
margin-left与left区别 可扩展为margin-left、margin-top、margin-bottom、margin-right与left、top的区别 1.使用margin-left时，父容器不考虑是否设置了position 2.使用left前提是必须设置本身的position:absolute或relative，否则不生效，top等亦是如此 margin与padding区别 1...
给行内元素设置padding和margin是否有效
qq_42874319的博客
06-23 5602
给行内元素设置padding和margin是否有效 1.行内元素拥有盒子模型么 答案是是的。没错，行内元素跟块级元素一样，同样拥有盒子模型。 2. 行内元素的padding和margin值的设置是否有效 块级元素的padding和margin值的设置都是有效的。那么行内元素的padding和margin值的设置是否有效呢。 2.1 margin值 首先看margin值的设置： 可以看出margin-top和margin-bottom并没有起作用。下面看左右外边距： 可以看到行内元素的margin-le
CSS: IE中的BUG之margin-bottom失效
u011927449的博客
06-11 1460
1. 出现条件 元素被浮动, 且其后没有其他元素,元素的margin-bottom不为0或auto. 2. 症状 为元素指定的margin-bottom无效, 就像margin-bottom为0一样. 3. 受影响的浏览器 IE6, IE7 4. 原因 暂不知道 5. 解决方法 a. 取消元素的margin-bottom, 改为指定父元素的padding-bottom(推荐); b. 在元素之后添加一个<br />, 为其指定如下样式(不推荐, 放在此处, 了解一下): elem{clear:b
margin-bottom、margin-top设置不起效
qq_44792224的博客
11-08 1500
如下，在uniapp项目中使用了tag标签，设置margin时，只有margin-left、margin-right生效，margin-bottom、margin-top设置不起效。f12直接在元素中修改也无效。
对span标签使用margin-top和margin-bottom没有效果
qq_45560350的博客
05-25 4352
<span>标签是行内元素，对宽高属性不生效，完全靠内容撑开，对<span>标签来说，只有margin-left和margin-right起作用。 想要margin-top和margin-bottom对<span>标签生效，可以把<span>标签通过display：inline-block；或者display：block；更改为行内块元素或者块级元素。 ......
css布局：为什么margin-right不起效果，如何居中显示。
scarlett1017的博客
05-08 3467
css布局：为什么margin-right不起效果 ，以及如何居中显示。 不清楚这个问题其实是没有弄明白网页水平布局的一个小原理 假设这里有一个div，在这个div盒子里面有一个小的div盒子 （这里大div盒子称作父元素，小的div盒子称作子元素） 满足一个公式 子元素中的：margin-left，margin-right，padding-left，padding-right，border-left，border-right，width ，相加会等于父级元素的宽。 那么为什么设置了margin-left
margin-right没效果，怎么解决
hechenxi_gaoya的博客
07-21 1万+
我们在设置盒子样式或者位置的时候会遇到margin-right没有效果。要怎么解决呢？首先要观察一下设置margin-right的元素有没有设置width属性，width的属性值是什么。 当没有设置width时，width默认为auto： 这时的margin-right是正常显示的； 当width设置为固定值或者百分比时： margin-right在默认文档标准流中是无效的，要想显示出效果，必须要脱离文档标准流，可以用下面的方法恢复margin-right的效果： float：left | right；
移动端开发底部元素margin-bottom失效解决办法
热门推荐
往后橘生
01-02 1万+
移动端开发底部元素margin-bottom失效解决办法
定义了浮动元素后margin-bottom失效的解决办法
elsyy良师益友的博客
12-21 3744
虽然IE6慢慢的退出市场了，但是还是有必要了解一些兼容问题，让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。 在 IE6 IE7 IE8(Q)中，容器div的 'zoom:1' 触发了 hasLayout，其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的 
uniapp滚动容器坑：margin-bottom失效？用这招秒解决
最新发布
m0_65352580的博客
12-11 773
看似是一个简单的样式问题，背后却关联着BFC、滚动容器特性、margin与padding的本质差异等知识点。前端开发中，“样式生效”只是基础，“理解为什么生效”才是提升的关键。下次再遇到margin失效的问题，别再死磕加!important了，先看看父容器是不是滚动容器，换个padding也许就能秒解决。你在开发中还遇到过哪些样式玄学问题？欢迎在评论区分享~
小程序margin-bottom在IOS里面不起作用的解决方法
小程序开发|APP开发|网站建设|ai智能体开发
08-22 733
将margin-bottom 改成 padding-bottom。小程序用margin-bottom在IOS手机失效问题。如何解决这个问题，可尝试用下面方法。
right与margin-right无效，如何使其有效
xiaoxiaofly的博客
01-10 5542
right与margin-right无效，如何使其有效 right有效必须使用position:absolute;right:10 margin-right无效，因为默认是左上对齐，可以使用浮动：float:right
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值