在span中margin失效的解决方法

最新推荐文章于 2022-05-07 10:43:18 发布
最新推荐文章于 2022-05-07 10:43:18 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： CSS 文章标签： margin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liaoxueli/article/details/84017090
版权
[quote]
因为span默认是行属性，而div默认是块属性，把span强制设为块属性就可以了。
即把这段
span{
margin-left:25px;
margin-top:200px;
}
改为
span{
margin-left:25px;
margin-top:200px;
display:block;
}
[/quote]
liaoxueli
关注
专栏目录
关于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
CSS BUG解决方法以及CSS BUG类的小技巧
09-27
要让固定宽度的页面在浏览器中居中显示，可以使用相对定位的外层div，并设置`margin: auto`，如：`#wrapper { margin: auto; position: relative; }` 对于IE6特有的Box Model bug，可以通过设置`box-sizing`属性...
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-top和margin-bottom没有效果
qq_45560350的博客
05-25 4019
<span>标签是行内元素，对宽高属性不生效，完全靠内容撑开，对<span>标签来说，只有margin-left和margin-right起作用。 想要margin-top和margin-bottom对<span>标签生效，可以把<span>标签通过display：inline-block；或者display：block；更改为行内块元素或者块级元素。 ......
<span>和<a>的margin上下和padding上下不起作用的原因和解决
weixin_30443731的博客
04-22 1049
使用到了<span>和<a>标签，发现在样式里面直接写margin-top、margin-bottom和padding-top、padding-bottom都不起作用，页面样式的东西懂得不多，搜索一番，发现是因为<span>和<a>都不是块级元素，所以这几个属性都无效。 解决办法：在样式 中加入display:block;即可解决问题。 span...
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...
span margin-right失效 margin-left正常
puspos的博客
02-22 921
对于span，margin-left是ok的，margin-right失效。 margin-right准确来说是 距离父元素的外边距时失效【即最右边元素设置靠右时】，当不是该行最后边元素时，是正常使用margin-right的 解决办法 设置样式：float:right ...
span 标签 margin-top 失效
最新发布
06-13
如果你在应用CSS样式时发现 span 标签的 margin-top 失效，可能是因为 span 标签是一个内联元素（inline element），而 margin-top 只适用于块级元素（block element）。 解决方法可以通过将 span 标签设置为块级...
iOS下Safari点击事件失效的解决方法
08-28
在iOS下的Safari浏览器中，点击事件可能会失效，这是由于委托给一个元素添加click事件时，事件是委托到document或body上，并且委托的元素是默认不可点击的（如div, span等），此时click事件会失效。 问题描述： 当...
一个通俗小故事告诉你溢出隐藏（overflow:hidden）失效的原因
09-25
【溢出隐藏（overflow:hidden）失效的原因】 在Web开发中，`overflow:hidden`是一个常见的CSS属性，用于控制...在实际项目中，遇到此类问题时，应仔细检查元素的样式设置，找出导致`overflow:hidden`失效的根本原因。
Margin-left无效的原因
weixin_43936793的博客
11-20 2181
Margin-left无效的原因 这是在360浏览器下图片 这是在火狐浏览器下的图片 代码没有改动，换个浏览器就好， margin-left本身不兼容IE6
【文字和图片居中对齐】图片和文字垂直居中对齐，span使用margin和line-height不生效解决办法
seeeeeeeeeee的博客
05-07 1656
图片展示 问题： 今天遇到的问题，我需要一行展示一堆的图片，中间穿插#号，那我就直接一个img标签一个span标签了，直接就排在了一起，非常简单。然后需求是井号要在图片的中间。我就直接加了个行高，发现没生效，然后又试了一下margin-bottom，准备给他顶上去，也不生效。又想到span是行内元素，我就加了inline-block，但是还是都不生效。 后来发现这样写可以生效。 代码 html部分 <div class="liaokuangbox"> <img
CSS:span元素margin-top无效的根源
黄彪博客
09-07 1727
span默认是行属性，而div默认是块属性。   对行内元素（不包括可替换元素如img等）：     1. 设置宽度width 无效。     2. 设置高度height无效，可以通过line-height来设置高度。     3. 设置margin只有左右margin有效，上下无效。（这就是span的margin-top无效的原因）     4. 设置padding只有左右paddi
为什么给span设置宽度不起作用【2021.11.9】
masierty的博客
11-10 3627
因为span是行内元素，而对行内元素设置宽高是无效的且不会自动换行（margin和padding设置上下都无效），知道了这个那解决办法就简单了，将span变为块级元素呗。 等等，如果只是变为块级元素block，会改变你之前的布局，比如自动换行，最好的办法是display：inline-block； 补充一点a标签也是行内元素哦。 ...
span标签设置margin-top没有效果呢？
ITzhongzi的博客
09-22 6266
是行内元素，span只有margin-left和margin-right才有效果。要想margin-top生效就要把span转给块级元素才行。在span的css中加入以下属性即可。 .span{display:block;}
给li标签中的span设置属性margin-bottom不生效
感恩、奋进、自信
10-28 2882
给li标签中的span设置属性margin-bottom不生效html如下： &lt;ul class="lottery_main""&gt; &lt;!-- 每个中间人的头像和名字 --&gt; &lt;li class='li25'&gt; &lt;span class="lottery_name25"&gt;飘
html span 无法点击,为什么span的点击失效
weixin_39809175的博客
06-25 1583
.left div,.right div {width: 500px;height: 100px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}.left div {background: #bbffaa;}.right div {background: yellow;}事件对象的属性与方法外层div元素内层span元素 ...
html 中的div或者span或者p标签文本超出宽度不会自动换行 span设置不了margin的原因
hzxOnlineOk的博客
09-01 1405
html 中的div或者span或者p标签文本超出宽度不会自动换行的原因 .am-list-item .am-list-line .am-list-extra { flex-basis: 60%; white-space: no-wrap; // 就是这行导致的 } span设置不了margin（非块元素需要设置display: 'inline-block',） <span style={{ display: 'inline-block', color: 'red',..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值