小程序margin-bottom在IOS里面不起作用的解决方法

转载 已于 2023-08-22 13:16:37 修改 · 733 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：http://bbs.feimtech.com/t/68
标签
#小程序
于 2023-08-22 13:03:01 首次发布

margin-bottom ，是页面标签底部的元素属性, 例如view中的定义按钮,如果想要距离底部有20rpx,按照常规写法margin-bottom:20rpx，但是小程序用margin-bottom在IOS手机出现失效问题

如何解决这个问题，可尝试用下面方法

将margin-bottom 改成 padding-bottom

【微信小程序_10_wxss模板中的内边距与外边距】
最新发布
爱吃凉拌辣芒果的博客
10-12 1017
本文介绍了微信小程序开发中内边距（padding）和外边距（margin）的概念及作用。内边距是元素内容与边框间的距离，可调整文字与边框的间隔；外边距是元素边框与相邻元素间的距离，用于控制元素间隔及实现水平居中。合理运用这两个属性可实现美观、合理的页面设计。
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"> ...
CSS中的margin-bottom属性是否无效？
TdMaster的博客
10-02 1488
综上所述，CSS中的margin-bottom属性是有效的，但在某些情况下可能会出现似乎无效的情况。内容溢出：如果元素的内容溢出了其容器，那么margin-bottom属性可能无效，因为溢出的内容不会影响元素的尺寸和位置。如果你在浏览器中打开HTML文件并检查元素的样式，你会发现.box元素的下边距（margin-bottom）确实被正确地应用了。相邻元素：如果两个相邻的元素之间的margin-bottom属性值重叠，那么较大的值会覆盖较小的值。解决方案是使用适当的技术（例如添加空的。
margin-bottom、margin-top设置不起效
qq_44792224的博客
11-08 1500
如下，在uniapp项目中使用了tag标签，设置margin时，只有margin-left、margin-right生效，margin-bottom、margin-top设置不起效。f12直接在元素中修改也无效。
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
微信小程序中IOS机型 margin-bottom 属性失效问题
欲变世界，先变其身
09-29 1263
在微信小程序中，给一个view设置margin-bottom属性，在模拟器上生效，但是IOS真机上无效。
微信小程序底部元素 margin-bottom失效解决办法
zeroyulong的博客
04-27 1万+
question：微信小程序开发过程中，页面底部元素设置margin-bottom在ios下失效。 answer：可给page设置padding-bottom来解决  
Uniapp 最后一个盒子 margin-bottom 后没有效果
m0_48909912的博客
12-26 1144
Uniapp 最后一个盒子 margin-bottom 后没有效果
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-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)和内边距（padding）
小天空的博客
01-05 8744
说到边距，那这个基本上跟android里的概念差不多，先来看一个图吧，（虽然标注的丑了点，不过那不是重点） 一.margin：外边距；设置对象四边的外延边距。 margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 margin：20rpx：如果只提供一个，将用于全部的四边。 margin：20rpx 20rpx：如果提供两个，第一个用于上、下，第二个用于左、右。 margin：20rpx 20rpx 10rpx：...
微信小程序margin-bottom 失效
jiujiuyibai的专栏
03-17 1282
如下图所示，wrapper 设置margin-bottom 140rpx, 底部的button是fixed布局，高度是120rpx，但是页面拉到最底部，wrapper中的内容被遮挡住了。 后面考虑了下，wrapper 中的内容早已超出屏幕的高度，但是height却设置成100%，把该项配置去掉之后页面展示正常 ...
【微信小程序】第三章 总结
m0_73027263的博客
03-14 2350
行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。flex 布局主要由容器和项目组成，采用 flex 布局的元素称为 flex 容器( flex container)，flex 布局的所有直接子元素自动成为容器的成员， 称为flex 项目( flex item )。此外，对 padding、border 和 margin 可以进一步细化为上、下、左、右４ 个部分， 在ＣＳＳ中可以分别进行设置。
微信小程序view设置margin-top和margin-button无效的解决方案
qq_46170459的博客
02-13 2662
微信小程序view设置margin-top和margin-button无效的解决方案。
移动端开发底部元素margin-bottom失效解决办法
热门推荐
往后橘生
01-02 1万+
移动端开发底部元素margin-bottom失效解决办法
微信小程序遇到margin-top无效的解决方法
qq_37107602的博客
10-23 473
如果你的代码格式类似这样。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值