题一： 一般在我们的认识里行内元素是不支持宽高的，如果要让其支持宽高，必须通过css显示的转换：display:block;可是所有的行内元素都不支持宽高吗？其实不然，来看下面的例子：

demo1

demo2

代码运行后我们发现input和img标签居然支持宽高，在我们的印象中input和img是行内元素（inline），是不支持宽高的，但是它们却有点特殊，原来它们是可替换元素！

html中的元素可分为替换元素和不可替换元素，替换元素本身是空元素，是由其属性来决定的，比如这里的input，通过type属性就可将其设置为文本框或单选按钮，img也一样，通过src元素可以来显示不同的图片，常见的有<img>、<input>、<textarea>、<select>，他们和一般的行内元素有区别，行内元素不支持宽高，而它们却支持width和height属性，如果没设置宽高，就显示默认的大小，比如img，就显示图片原来的尺寸。

不可替换元素比较常见，也就是块级元素(div,p,h1……)或一些行内元素(span,strong,a……)，它们是直接显示元素内容，比如你什么时候见过div通过type来显示不同的东西？显然没有。

问题二：行内元素除了可替换元素外，比如span元素，一定要display:block;才可以支持宽高吗？其实也不然。且看下面例子：

或者这样设置也可以：

显然我并没有显示的设置span元素为block，但是同样能支持宽高，这里的原因是我css设置了span为position:absolute;或者float:left;让其具有包裹性，从而支持宽高，所以在你设置元素浮动或者绝对定位的情况下，设置元素display:block;就显得多余了。

Ps:如果喜欢，那就关注我吧！

技术等级】初级

【承接文章】《CSS段落对齐方式，系统认识块级元素与内联元素，CSS前端进阶篇》

本文重点讲解CSS技术中文本样式的 line-height 属性以及该属性在单行垂直居中问题上的应用。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。

一、设置段落行距：

CSS技术利用 line-height 属性来设置行距

顾名思义，行距就是段落中行与行之间的距离。调整行距可以让段落看起来更加美观。

该属性的取值是带有单位的数值。

例如：p{line-height:30px;}

上述代码表明：<p></p>标记对内部文本的行距为30像素。

本身该属性的使用是非常简单的，但是有一个问题需要大家考虑：这个行距是以一行的哪个标准线来进行度量的呢？答案是一行的“基线”。那么，什么是“基线”呢？

四线三格的第三线就是 “基线”

上面这张图为我们解释了什么是“基线”。基线就是英语本子上四线三格的第三线，是大部分英文字母在书写时结束的那条线。

在CSS中，line-height 属性的调整就是以这条线为标准线的。换句话说，当line-height属性设置为一定的数值时，段落中任意两行的行距就是这两行基线之间的距离。

二、行距属性的应用：

首先，大家看下面这个效果。顶部文本“欢迎关注小海前端”这几个字在一个粉红色的块中显示，并且是垂直方向居中的，这个应该在页面中如何设置呢？

如何实现块中的垂直居中

这就需要用到 line-height 属性的一个小技巧。

当一行文本（注意：必须是一行）在一个<div></div>块内部显示时，将该<div></div>块的行高设置为这个块本身的高度，就可以让内部的一行文本垂直居中了。

相应的CSS代码如下所示：

div{

width:1000px; height:30px;

background-color:#ff5857; //该属性为背景颜色，主要是让我们能够看到块本身

line-height:30px;

}

大家看上述代码：line-height 属性的取值和 height 属性的取值是相同的，这样内部的一行文本就实现垂直居中了。

文章预告

下一篇文章中，小海老师会重点为大家讲解vertical-align属性的使用。该属性的使用要求较多，使用起来较为繁琐，希望广大前端爱好者千万不要错过。

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我。我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上也已经写了有十篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我精心整理和系统的归纳过的。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。