span margin-right失效 margin-left正常

最新推荐文章于 2022-07-18 12:02:07 发布
最新推荐文章于 2022-07-18 12:02:07 发布
阅读量921 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/puspos/article/details/113930538
版权

对于span，margin-left是ok的，margin-right失效。
margin-right准确来说是 距离父元素的外边距时失效【即最右边元素设置靠右时】，当不是该行最后边元素时，是正常使用margin-right的
解决办法
设置样式：float:right

puspos
关注
关于DIV margin-top失效的解决办法
web开发技术
07-26 1280
用DIV+CSS布局网页内容时，常常会遇到一个问题：就是当前DIV样式设置了上边界缩进margin-top属性，但是显示出来的效果却是没有缩进。这种情况出现在前面放置的DIV设置了浮动属性， 后跟着的Div的上边界缩进就不能正常显示。下面我们分析两种情况，代码如下： <div style="width:500px; float:left; height:300px; margin:5px">此处显示新 Div 标签的内容</div> <div style="wi
从零开始学前端 - 7. CSS盒模型 margin和padding详解
qq_39506551的博客
06-03 749
她不美却常驻我心 从零开始学前端 - 7. CSS盒模型 margin 和 padding 详解 CSS盒模型 CSS外边距 margin margin-top失效 margin-bottom与margin-top 的冲突 padding 作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551
HTML、CSS基础篇 为什么margin-left能用 margin-right不能用
chengjianghao的博客
10-19 2110
为什么margin-left能用，而有时候margin-right却没有用？ 浏览器默认从左向右渲染，所以元素是从左向右排列的,margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果。如果脱离标准流呢？想到这个，就立马在css文件中加了一个：float:right;然后在测试的时候就能看到margin-right的效果了 用float:left也是不行的，这跟默...
margin-right对span真的无效吗？
有术无道止于术，有道无术尚有可为。
05-04 544
我的思维是将span右外边距设置为0那么他不就变成右对齐了吗？然而并没有什么卵用，这是为什么呢？上个图你就知道了 首先我们写两个span，并设置他们的右外边距 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" con...
css布局：为什么margin-right不起效果，如何居中显示。
scarlett1017的博客
05-08 3043
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右边距失效：CSS
有兴趣深入交流
02-17 2426
浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下 如果子容器的宽度能够被容纳 设置margin-right是没有用的 解决办法在元素外面再套一层div，display设置flex &-divbutton { display: flex; &-button { margin-left: 20px; margin-right: 20px; margin-top: 30px; } } ...
Margin为什么对span无效呢？
UnOpenMyCode的专栏
08-06 1万+
 span默认是行属性，而div默认是块属性，把span强制设为块属性就可以了。 span{ margin-left:25px; margin-top:200px; } 改为 span{ margin-left:25px; margin-top:200px; display:block; }
在span中margin失效的解决方法
shirlly
09-14 2508
[quote] 因为span默认是行属性，而div默认是块属性，把span强制设为块属性就可以了。 即把这段 span{ margin-left:25px; margin-top:200px; } 改为 span{ margin-left:25px; margin-top:200px; display:block; } [/quote]...
绝对定位+margin auto垂直居中引发的思考
qq_38164763的博客
06-10 1071
占
对行内元素设置padding和margin不起作用
weixin_44645309的博客
12-29 1294
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、对行内元素设置padding和margin二、使用步骤1.引入库2.读入数据总结 前言 看了表严肃表哥的电商网站项目，自己动手亲自实现了一遍，前前后后遇到了几个问题，特此总结一下。 一、对行内元素设置padding和margin 代码： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="
el-form动态表单验证（v-if、v-show导致校验失效的bug）
YSD2468的博客
04-13 2525
今天同事遇见一个很奇怪的问题，vue里面element form表单验证有一个不生效。 一开始我以为是prop没绑定或者绑定错了 ![验证不生效](https://img-blog.csdnimg.cn/20200413202247674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cH...
微信小程序text margin-left与margin-right无效，设置其距离父组件view两边一定距离
qq_37229577的博客
04-14 3130
初次接触小程序前端，碰到一个需求就是要让text距离其父组件view两边相同距离，但经过设置之后发现margin-left，padding-left可以用，但这样text文本就会超出view宽度范围，所以我在text上又套了一层view做其父组件,设置其width:90%;margin-left:5%;然后text无需再设置就可以实现距离两边界相同距离之后自动换行，当然text要加上word-br...
margin-right无效问题简析
money_monkey的博客
07-18 4830
margin-right无效问题简析
span标签对于margin-top,margin-bottom无效，但是margin-left,margin-right却是有效的。
weixin_34248849的博客
06-01 697
首先，span是行内元素，是没有宽高的。 我们来做个简单的布局 <div> <span>内容内容内容内容内容内容内容内容</span> </div> 页面的最原始的效果,就给div加个边框： 为了能够让span的margin-top和margin-bottom生效，可以按照下面的做法：给span加一个display:inli...
margin-right、margin-bottom设置不起作用？
westdu的博客
12-18 6308
猜想，待验证： 浏览器默认是从左向右渲染 一个div .box默认是左上对齐，所以margin-right、margin-bottom设置不起作用
margin-right没效果，怎么解决
hechenxi_gaoya的博客
07-21 9567
我们在设置盒子样式或者位置的时候会遇到margin-right没有效果。要怎么解决呢？首先要观察一下设置margin-right的元素有没有设置width属性，width的属性值是什么。 当没有设置width时，width默认为auto： 这时的margin-right是正常显示的； 当width设置为固定值或者百分比时： margin-right在默认文档标准流中是无效的，要想显示出效果，必须要脱离文档标准流，可以用下面的方法恢复margin-right的效果： float：left | right；
right与margin-right无效，如何使其有效
xiaoxiaofly的博客
01-10 5462
right与margin-right无效，如何使其有效 right有效必须使用position:absolute;right:10 margin-right无效，因为默认是左上对齐，可以使用浮动：float:right
span设置内外边距问题
热门推荐
euxil97的博客
09-22 1万+
span设置内外边距问题 margin： span标签设置margin-left/right均好使，margin-top/bottom不好使； padding： span标签设置padding好使，但span标签上面无元素时，padding-top不好使；span标签上面有元素时，padding-top会把上面的元素盖住
外边距样式属性---margin
YXX_decsdn的博客
05-18 1435
margin1，margin-top样式属性2，margin-bottom样式属性3，margin-right样式属性4，margin-left样式属性5，margin样式属性 在讨论margin-top和margin-bottom 之前，先创建如下HTML文件，以此为例讨论下边的margin样式属性，以div标签为例说明（div标签是块级元素） 在浏览器执行窗口显示如下： 1，margin-...
span 标签 margin-top 失效
最新发布
06-13
如果你在应用CSS样式时发现 span 标签的 margin-top 失效，可能是因为 span 标签是一个内联元素（inline element），而 margin-top 只适用于块级元素（block element）。 解决方法可以通过将 span 标签设置为块级元素，例如： ```css span { display: block; margin-top: 10px; } ``` 或者，你可以尝试使用 padding-top 替代 margin-top，因为内联元素可以使用内边距（padding）。 ```css span { padding-top: 10px; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值