SPAN的高度问题

最新推荐文章于 2024-09-26 11:36:05 发布

chuzhenbin

最新推荐文章于 2024-09-26 11:36:05 发布

阅读量803

点赞数 1

分类专栏： css 文章标签： xhtml html 文档 web

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何为HTML中的SPAN元素设置高度。通常情况下，直接设置SPAN元素的高度无效，需将其显示属性设置为block或inline-block。文章详细解释了不同显示属性的效果及适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自:http://www.cnblogs.com/aszx0413/articles/1888798.html

FIRST OF ALL，最容易令人忽略而导致头疼的因素。web页面文档类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

众所周知，SPAN元素内单纯设置height是没有效果的。

需要设置SPAN的高度，需要将其设置成block元素。

display:block

但这样会导致span占据了整一行，我们通常不希望这样。

所以可以采用display:inline-block 。

注意：display:inline是没有效果的，一定要设成block元素。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chuzhenbin

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

关于span高度过高，且文字脱离span盒子的原因

shandamengcheng的博客

11-07

2741

首先我们来看问题描述：我设置的span标签时，当设置一个高度之后，发现本该在元素盒子内的文字在外面。再看一下代码： <div class = "commenter"> <img src = "background.png" class = "userImg"> &lt...

定义内联元素span的最小高度问题

09-28

这就是标题“定义内联元素span的最小高度问题”所关注的核心内容。 `span`标签是一个典型的内联元素，它的主要特点是沿水平方向排列内容，不占据独立的块级空间，因此，直接给`span`设置`width`和`height`通常不会...

参与评论您还未登录，请先登录后发表或查看评论

设置SPAN的高度

yiluoAK_47的专栏

02-22

5282

span要设置高度，必须要转换成block元素才可以： display:block; 但是这样就会使span占据一整行的位置，一般来说这样是很蛋疼的。。。。今天看到一个方法： display:inline-block; 这样就可以实现把span转换成block元素又可以使span不至于占据一整行的位置了，o(∩_∩)o 哈哈，完工~ PS：

定义span的最小高度

呼啦圈的专栏

10-22

1370

制作html网页经常会使用到span这个标签，但有些朋友对这个标签很多朋友用不好，似乎觉得它又很好用，但有用起来又很麻烦，尤其是需要给它定义宽度和高度的时候。曾经有朋友问：为什么给用css给span定义高度和宽度后，它的宽度和高度仍然没有变化，好像失效了一样？其实这个问题很简单——先要认清span的属性，因为span属于内联元素，而内联元素是忽略宽度和高度的，明白了这一点解决就很简单了，解

关于span标签的宽度和高度设置

热门推荐

梦想是成为一个弓箭手

03-07

4万+

正常情况下我们设置span标签是无法设置span标签的宽度和高度的。那么怎样才能设置呢。个人感觉意义并不大，如果需要可以使用div。 span是有display:inline-block和float属性的，只要设置了这两个属性，就会认为它是一个块级元素。下面是例子：关于span标签的宽度和高度无浮动和inline-block 有浮动和inline-block 无浮

＜span＞的宽高到底是多少？

Zero_uou的博客

08-04

4352

<div style="width:400px;height:200px;"> <span style="float:left;width:auto:height:100%"> <i style="position:absolute;float:left;width:100px;height:50px;">hello</i> </span> </div> 问题是span标签的width和height分别为多少? .

设置span宽度高度的方法

09-25

设置span宽度高度的方法在 HTML 中，span 元素是一个内联元素，默认情况下，它的宽度和高度是自动计算的，取决于其内容的宽度和高度。当我们需要设置 span 元素的宽度和高度时，需要使用 CSS 样式来实现。首先，...

定义span的最小高度没有效果的解决方法

09-28

标题中的问题“定义span的最小高度没有效果的解决方法”直指这一核心问题。当尝试给 `<span>` 设置 `height` 和 `width` 时，由于 `<span>` 是内联元素，它会遵循内联元素的规则，即只占据其内容所需的宽度，并且...

HTML中给span标签设置宽度和高度，发现没有效果，原因如下

qq_73597830的博客

09-26

781

设置之后，该标签会独占一行，作用是将其转换为内联块元素，之后就可以设置它的宽度和高度了。你会发现它的宽度和高度并没有变化。虽然这两个都能解决问题，但它们还是有一定区别的。当你在浏览器中打开时，它的效果是这样的。然后就可以设置宽度和高度了。

<span>的高度和宽度没有效果

hongweigg的专栏

08-20

2813

问题：在HTML页面中设置"<span>"元素的样式，发现设置无效，通过查看其CSS属性值，发现总是为“auto”，即使加上“!important”提高其优先级别也无效： <style> .aclass{ background:#0092d8 url(gantt-images/equals.png); } </style>...

span标签不支持设置宽度高度的解决办法；span强制单行显示，超出部分省略号表示或者隐藏，设置显示的最大宽度

weixin_46689373的博客

01-15

2183

span标签不支持设置宽度高度的解决办法；span强制单行显示，超出部分省略号表示或者隐藏，设置显示的最大宽度

span宽度高度设置

稻草人技术博客

06-02

1678

1 DOCTYPE html> 2 html xmlns="http://www.w3.org/1999/xhtml"> 3 4 head> 5 meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 6 title> 7

【已解决】span的宽度与高度如何设置

执念斩长河

07-31

1223

本博文源于笔者基础不扎实的情况下遇到的一个问题，问题是我有三个span，想让它们宽度与高度再大点，结果发现怎样设置都设置不了。最后不经意间解决问题

前端学习之如何设置span的宽度和高度

qf2019的博客

07-15

4843

很多前端培训学员在刚开始学习div+css布局的时候可能会碰到这样的问题，使用CSS代码无法设置span的高度和宽度，尽管CSS代码没有错误，却无法生效。那么接下来就给大家介绍一个解决的办法。方法： span{display:block;width:200px;height:100px;} 要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。 ...

html的span设置高度无效

Nemo的笔记本

04-11

3795

解析：span标签在CSS中是用来组合行内元素，如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异，我们可以对span设置id或者class属性对其添加样式不仅设置高度无效，而且内边距和外边距也无效！组合行内元素：依靠内部元素，有内容则撑起来，没有就不显示。解决办法1.内容设置为 2.须将行内元素转换为块级元素，添加属性：display:block；

css span宽度和css span高度成功设置经验篇

qq_29069777的博客

10-10

1084

我们介绍两种情况下的对span宽度高度样式成功设置。为了观察和实践CSS SPAN宽度和span高度成功设置，DIVCSS5新建一个css命名为“.divcss5”的盒子，设置css宽度为150px...

为什么浮动的，有宽度没高度的，没有内容的行内标签不能起到占位的作用？

暗暗那的博客

03-03

272

可以看到span浮动的时候，123左边并没有出现20px的空白。正常的浮动会使后面的元素紧跟在浮动元素后面，所以后面的元素距离左边框的距离至少等于浮动元素的width。但如果是未设置高度或设置高度为0，且没有内容的行内元素，它的高度为0，后面的元素无法与它放在同一行，于是放在了下一行。这就导致从视觉上该浮动元素“消失”了。新手入门，若理解有误，还请多多指教！ ...

H5基础_2_CSS

jiafeitutu的博客

05-27

620

如果说html是儿子,那么css就是老妈了,负责打扮儿子. 块级元素像男人，是骨架，是山。行内元素像女人，是血肉，是水。一阴一阳之谓道！

span设置宽和高当没有内容的时候也可以撑开

weixin_34166847的博客

05-14

769

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &...

改变span标签的高度