11-3元素分类--内联元素 · 初识HTML+CSS

在html中,`<span>、<a>、<label>、 <strong> `和`<em>`就是典型的**内联元素**（**行内元素**）（inline）元素。当然**块状元素**也可以通过代码`display:inline`将元素设置为**内联元素**。如下代码就是将**块状元素div**转换为**内联元素**，从而使 div 元素具有**内联元素**特点。 ~~~ div{ display:inline; } ...... <div>我要变成内联元素</div> ~~~ **内联元素特点：** 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距**不可**设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。 ### 任务 **我来试一试：感受一下内联元素的特点** 在右侧代码编辑器中输入各种内联元素标签，试一试他们的特点。 **这一小节没有正确性验证，单击“提交”按钮进入下一小节学习。** ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>行内元素标签</title> <style type="text/css"> a,span,em{ background:pink;/*设置a、span、em标签背景颜色都为粉色*/ } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.imooc.com">慕课网</a> <span>33333</span> <span>44444</span><em>555555</em> </body> </html> ```