margin-bottom、margin-top设置不起效

最新推荐文章于 2023-12-26 19:45:12 发布
最新推荐文章于 2023-12-26 19:45:12 发布
阅读量766 收藏
点赞数
文章标签： javascript 开发语言 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44792224/article/details/134292705
版权

问题：

如下，在uniapp项目中使用了tag标签，设置margin时，只有margin-left、margin-right生效，margin-bottom、margin-top设置不起效。f12直接在元素中修改也无效。
在这里插入图片描述
在这里插入图片描述

原因：

uni-ui中的tag标签是行内元素，无法设置margin-top和margin-bottom

解决：

将这个tag标签display:inline-block就可以了
效果如下：
在这里插入图片描述

ToOTOooo
关注
CSS_为什么margin-bottom经常无效，或者无法实现子div底部贴边父div？
Chill Lyn
09-16 5396
首先我们定义两个div，一大一小，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
flex 使得 行内元素 的margin-top 能能作用
cooker_666的博客
04-05 832
flex 和 inline元素 起因: 在书写wx 小程序中，发现 text 模块的 margin-top 一直没起作用，而我跟着临摹打的效果图却表示 text 的margin-top 确实起作用了。这让我误以为 text标签是行内块元素(我也误认为span 也是 行内块元素了…),继而误以为是因为 flex 元素和 行内块元素排列导致的，然后测试一番，发现并非如此，margin-top依旧起作用了。 后面重新审查了一遍代码发现 container 被我打错了， .container 的类样式并没有起作用，
margin-bottom无效
君王羔羊
05-25 2040
解决方法：给该容器一个父容器，并设置父容器overflow:hidden;
CSS中的margin-bottom属性是否无效？
TdMaster的博客
10-02 990
综上所述，CSS中的margin-bottom属性是有效的，但在某些情况下可能会出现似乎无效的情况。内容溢出：如果元素的内容溢出了其容器，那么margin-bottom属性可能无效，因为溢出的内容不会影响元素的尺寸和位置。如果你在浏览器中打开HTML文件并检查元素的样式，你会发现.box元素的下边距（margin-bottom）确实被正确地应用了。相邻元素：如果两个相邻的元素之间的margin-bottom属性值重叠，那么较大的值会覆盖较小的值。解决方案是使用适当的技术（例如添加空的。
CSS: IE中的BUG之margin-bottom失效
u011927449的博客
06-11 1176
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
html bottom没有效果,css 设置margin-top或margin-bottom失效不取作用的解决方法
weixin_29063035的博客
06-03 6661
首先来看一个案例：.bottom-box{margin-top:30px;}我设置了margin-top属性，我的上边距应该距离父元素为30px;可是结果如何呢？结果并不是class为bottom-box的div上边距离父元素30px;而是距离body元素30px;什么原因呢？当个子元素设置margin-top属性时，如何父元素没有设置padding属性，即padding属性为0，那么会出现以上这...
clear:both后margin-top不起作用其他左右下都起作用
09-25
第二个`div`使用`clear:both`来确保它在垂直方向上不与第一个浮动`div`重叠，同时设置了`margin-top:20px`、`margin-bottom:20px`和`margin-right:20px`。 在这种情况下，`clear:both`的`margin-top`不起作用的原因...
firefox margin-top失效的原因与解决办法
10-30
清除操作（比如`clear: both`）可以阻止margin折叠，特别是在元素的margin-top与其块级父元素的margin-bottom之间。 如果遇到Firefox中`margin-top`失效的情况，可以尝试以下几种解决方法： - 检查是否有浮动元素...
margin-left和right失效(斯芬克斯)之谜
01-24
通常这种情况发生在垂直方向上，即`margin-top`和`margin-bottom`。但是，本文讨论的是水平方向上的`margin-left`和`margin-right`失效问题。 #### 二、margin-left/right 失效的现象及原因 **现象：** 在某些情况...
css中margin-top/margin-bottom失效
angou6476的博客
12-12 169
要设置这两个值，我的理解应该在这个div的父容器中设置了固定宽高，或者设置了绝对定位，比如position:absolute（绝对定位） 或者压根不用，直接用padding-top/padding-bottom替代 参考： http://www.111cn.net/cssdiv/163/87752.htm 转载于:https://www.cnblogs.com/EasonJim/...
ios手机margin-bottom失效问题
mingquantingxue的博客
11-13 1650
问题 小程序中的页面设置margin-bottom，在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone手机中margin-bottom会失效。 原因 从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值为8pt。 如果一个View是ViewController的rootview，系统会自动设置和管理margins，top和bottom。margins
margin-bottom在部分机型没效果
通俗易懂
04-24 394
遇到的问题 列表渲染过程中底部部分文字被按钮遮挡无法显示出 什么导致的 列表底部设置的margin-bottom，在部分机型中没有效果，这是部分机型的bug 解决的办法 将列表底部margin-bottom高度换成一个空的View即可 由于底部按钮和列表不再同一图层，可以给底部按钮套一个View起高度和按钮一样高即可 ...
Uniapp 最后一个盒子 margin-bottom 后没有效果
最新发布
m0_48909912的博客
12-26 735
Uniapp 最后一个盒子 margin-bottom 后没有效果
marginBottom不起作用了？安卓很好玩的事情，不知道也挺愁人的
csdn1073044009的博客
10-27 1597
<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true"> <com.jinsu.aiqiyue.Ci
IE8 margin-bottom 不起作用
kogu的博客
04-05 4362
碰到一个很奇怪的问题，在IE8下，设置了margin-bottom，页面显示的时候不起作用，在网上找了一下， 都说是 float 搞的，把这个属性去掉后还是这样，后来找到一个关于 margin 折叠的帖子，终于解决问题了。 解决方法：在样式里加上  display:inline-block;属性。   参考：http://wenku.baidu.com/view/9abd2b41336c1
关于margin-top失效的情况
qq_42931285的博客
03-01 798
关于margin-top失效的情况
对行内元素设置margin-top和margin-bottom是否起作用
weixin_30548917的博客
02-23 846
对行内元素设置margin-top 和margin-bottom是否起作用？不起作用。（需要注意行内元素的替换元素img、input，他们是行内元素，但是可以为其设置宽高，并且margin属性也是对其起作用的，有着类似于Inline-block的行为）<!DOCTYPE html> <html> &l...
IOS margin-bottom失效问题
weixin_33753003的博客
12-21 1430
问题 webAPP中内嵌的H5页面设置margin-bottom，在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone中无论嵌套多少层margin-bottom，均会失效。 原因 参考资料 从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值...
margin-bottom: 20px;
06-12
`margin-bottom: 20px;` 是 CSS 的设置，表示元素的下外边距（margin）为 20px。在 HTML 中，每个元素都有四个方向的 margin 属性，分别是 margin-top、margin-right、margin-bottom 和 margin-left。其中，margin-bottom 表示元素的下外边距。 设置 margin-bottom 属性可以让元素的下方留出一定的空间，与下面的元素或者父容器之间产生一定的距离。比如，设置 `margin-bottom: 20px;` 可以在元素下方留出 20px 的空间。 需要注意的是，如果元素的 margin-bottom 与下面的元素或者父容器的 margin-top 重叠，那么它们的距离就会变成两者的最大值。这种情况被称为“margin 合并”，需要特别注意。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值