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

span这个标签,想必大家都熟悉吧,但有用起来又很麻烦,尤其是需要给它定义宽度和高度的时候

 

制作html网页经常会使用到span这个标签,但有些朋友对这个标签很多朋友用不好,似乎觉得它又很好用,但有用起来又很麻烦,尤其是需要给它定义宽度和高度的时候。
曾经有朋友问:为什么给用css给span定义高度和宽度后,它的宽度和高度仍然没有变化,好像失效了一样?

其实这个问题很简单——先要认清span的属性,因为span属于内联元素,而内联元素是忽略宽度和高度的,明白了这一点解决就很简单了,解决的办法就是利用css将span变为盒装元素即可。

将内联元素定义为盒装元素的方法有两种:

1.直接使用显示属性display将其定义为盒装元素;
display:block;

2.使用浮动属性float将其自动定义为盒装元素;
float:left;

时间: 2024-11-01 22:15:05

定义内联元素span的最小高度问题的相关文章

内联元素(inline element)和块元素(block element)

文章简介:CSS里有哪些常见的块级元素和行内元素?  根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素. div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高

block(块元素)、inline(内联元素)的差别是什么?

我们首先要了解,所有的html元素,都要么是block(块元素).要么是inline(内联元素).下面了解一下block.inline各自的特点: block元素的特点: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度. inline元素的特点: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度,不可改变. 我们来详细了解它们的情况. 块元素(block element)一般是其他元素的容器元素,块元素一

css position, display, float 内联元素、块级元素

position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的顺序渲染 absolute:绝对定位,元素相对于它的第一个被定位的祖先元素(非static)来进行定位 fixed:元素相对于浏览器window进行定位 relative:元素相对与它的正常位置进行定位,因此"left:20"就表示在元素正常位置的基础上,左移20像素的距离. float属

CSS常见内联元素和块级元素

[块元素(block element) ] * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div - 常用块级容易,也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form - 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 *

详解CSS布局设计块元素和内联元素

css|设计|详解 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P."form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout

html内联元素,伪类选择器,字体设置 表单,做网页流程

内联元素只在行内发挥作用, 而块状元素显示效果为一个矩形区域 内联元素不能设置width,height, 也不能设置竖起方向的margin,padding 2:内联元素与块状元素如何转化? 答:display:block/inline/none 3:举出你在项目中用到的内联元素转块状的例子? 图片空白的解决, a标签设置宽高时. 4:a标签的4个伪类选择器及顺序? a:link, a:visited ,a:hover,a:active l v h a 5:字体控制的5个顺序 font-style

块元素block element和内联元素inline element_CSS/HTML

内联级元素(inline-level element)中试图插入块级(block-level element)元素.这样做是不允许的.唯一的能在内联元素中插入块级元素的例外是object标签.那么什么是内联级元素(inline-level element)和块级(block-level element)元素呢?. 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签''P"."form"这个

CSS文档流与块级元素(block)内联元素(inline)

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位.   基于文档流, 我们可以很容易理解以下的定位模式: 相对定位, 即相对于元素在文档流中位置进行偏移. 但保留原占位. 绝对定位, 即完全脱离文档

div布局-与position修改为float的元素相邻的内联元素会如何排版?

问题描述 与position修改为float的元素相邻的内联元素会如何排版? #box1{ background-color:red; width:200px; height:100px; float:left;}#box2{ background-color:blue; width:200px; height:100px;}#box3{ background-color:yellow; width:200px; height:100px;}div id=""box1"&qu