span中设置margin生效

最新推荐文章于 2023-12-12 17:05:45 发布
原创 最新推荐文章于 2023-12-12 17:05:45 发布 · 4.3k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#div
本文介绍了如何将HTML中的span元素从默认的行内显示方式更改为块级显示方式。通过在CSS中设置display属性为block，可以使得span元素的行为类似于div元素。

span默认是行属性，而div默认是块属性，把span强制设为块属性就可以了。

比如：

span{
margin-left:25px;
margin-top:200px;
}


改为
span{
margin-left:25px;
margin-top:200px;
display:block;
}

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

对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；更改为行内块元素或者块级元素。 ......
html span设置外边距,行内元素内外边距探究：为何span设置上下margin和padding不起效...
weixin_32666933的博客
06-04 5446
一直以为行内元素设置内外边距会不起效，之前也没有具体的去实验，只是在需要设置 margin 或者 padding 的时候给元素设置一个 display: inline-block; 就得了。今天正好有时间，就来实验了一把。原来 span 标签默认的不是只能设置左右边距，还有更有意思的现象。我给 span 标签设置了 10px 的内边距和外边距，并设置了背景色，外面嵌套一个 p 标签。从 span ...
HTML5+CSS3学习笔记（七）行内元素设置margin和padding是否生效（以span、img为例）
Yeee_F
08-10 2810
行内元素设置margin和padding是否生效（以span、img为例）
解决span自动换行以及样式margin的问题
tingwufeixiang的博客
05-02 8085
因为span默认是行属性，而div默认是块属性，所以span是无法实现margin-top,margin-bottom，设置也会失效。 当然span也不根据长度自动换行。 解决办法： 1、把display设置为：inline-block       元素display属性的常见值说明：       block：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。（只
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; }
给li标签中的span设置属性margin-bottom不生效
感恩、奋进、自信
10-28 2985
给li标签中的span设置属性margin-bottom不生效html如下： &lt;ul class="lottery_main""&gt; &lt;!-- 每个中间人的头像和名字 --&gt; &lt;li class='li25'&gt; &lt;span class="lottery_name25"&gt;飘
li中的span设置float:right不生效
感恩、奋进、自信
10-13 6969
li中的span设置float:right不生效： 部分html代码如下： 部分css代码如下： li{ display:block; } #one{ float:left; } #two{ float:right; }本意是想让两个span在li中，第一个span左浮动，第二个span右浮动，结果第二个span右浮动没生效，显示的结果还是左
php 中margin-top,为何span的margin-top不起作用
weixin_39827036的博客
04-02 449
为什么span的margin-top不起作用:建议:尽可能的手写代码，可以有效的提高学习效率和深度。margin-top可以设置元素的上外边距，但是为span元素设置的时候却没有效果。代码如下:蚂蚁部落.parent{width:150px;height:150px;background-color:green;float:left;}span{margin-top:20px;background...
span标签设置margin-top没有效果
weixin_30614587的博客
12-12 312
<span>是行内元素，span只有margin-left和margin-right才有效果。要想margin-top生效就要把span转给块级元素才行。在span的css中加入以下属性即可 span是行内元素，margin只有左右，不能设置上下的margin. 转载于:https://www.cnblogs.com/devilkin-wang/p/6163286....
行内元素（span）-内外边距问题
singsingqin的博客
12-12 263
问题：给span元素加margin和padding值，却无法像div元素那样在垂直方向上改变位置。设置了line-height的span标签在垂直方向下移了。解决方法：加上 line-height。
span是什么元素？可以设置宽高吗？可以设置marigin/padding吗？
tinyint_813的博客
04-23 497
span是行内元素，不能设置宽高。 margin-left和margin-right有效，margin-top和margin-bottom无效。 padding-left和padding-right有效，padding-top和padding-bottom无效。 (margin padding 左右有效，上下无效) (注意：img的margin、padding是有效的) ...
CSS 基础知识【学习笔记】03
kuiini的博客
12-01 800
本文介绍了CSS中的结构伪类选择器、伪元素选择器以及盒子模型的基本概念和用法。结构伪类选择器如:first-child、:last-child和:nth-child用于根据元素在父容器中的位置选择特定元素，并支持公式选择多个元素。伪元素选择器如::before和::after用于在元素内部添加装饰性内容，需设置content属性。盒子模型由内容区域、内边距、边框和外边距组成，用于布局网页和调整元素间距。通过示例代码展示了这些选择器和模型的实际应用效果。
span 元素自带间距？？
qq_45288176的博客
06-25 3011
半行距：content内容与内容顶部的距离 padding：content内容与boder间的间距 margin：border外 元素与元素之间的间距
如何解决两个相邻的span中间空隙
Jq的博客
12-17 3875
产生间隙原因: 换行或空格会占据一定的位置。 1.span直接在一行，没有空格 &lt;style&gt; span{background: red;} &lt;/style&gt; &lt;span&gt;1&lt;/span&gt;&lt;span&gt;2&lt;/span&gt; 这种方案是最直接的解决方案，但却也是最不靠谱的方案，存在很多不可控因素。很多场景会让你崩溃：前后端协同...
DAY FIVE
m0_55006160的博客
06-29 158
组成：content->padding->border->margin(物品、填充物、包装盒、盒子与盒子间距)content：内容区域 width、heightpadding-（top、left、bottom、right）：内边距 *px、两个值（上下、左右）、四个值（上右下左）margin-（top、left、bottom、right）：外边距 box-sizing改变盒模型 box-sizing盒尺寸：可以改变盒子模型暂时形态content-box：width、height->conten
a span等行内元素加margin属性后无效果解决方案
weixin_30622107的博客
02-25 160
html中经常用margin属性来进行定位的调整，但a，span等行内元素加margin后不发生位移，给这些元素加上display:inline-block后就可解决；而且为行内元素加此属性后既可以像行内元素一样多元素同行，又可以为其设置块级元素的属性。 转载于:https://www.cnblogs.com/sccblog/p/4300015.html...
HTML行内元素的margin、padding
少油少盐不要辣
12-10 1375
212
【问题处理笔记】在CSS中span标签设置padding-top/bottom以及margin-top/bottom无效的解决方法
野臻
12-23 8417
在CSS中span标签设置padding-top/bottom以及margin-top/bottom无效的解决方法
span标签对于margin-top,margin-bottom无效，但是margin-left,margin-right却是有效的。
weixin_34248849的博客
06-01 789
首先，span是行内元素，是没有宽高的。 我们来做个简单的布局 <div> <span>内容内容内容内容内容内容内容内容</span> </div> 页面的最原始的效果,就给div加个边框： 为了能够让span的margin-top和margin-bottom生效，可以按照下面的做法：给span加一个display:inli...
Android文本样式——上
lixin84915的专栏
10-25 1万+
在android中，有时候需要对文本进行各种特别的设置，比如颜色、大小、首行缩进，或者是在一段文本中加入图片，甚至是书写一些特殊的公式。如果通过布局文件使用多个控件来实现，一方面会使的使用起来特别的复杂，增加了布局文件维护的难度，另一方面，如果加入了太多的控件，在页面加载时也要耗费更多的资源。如果在HTML中，则可以使用各种标签来实现这些特殊效果，而在android中有类似的机制，只不过不是使用标
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值