12-3 我要和你站一起 - 内联元素
本节编程练习不计算学习进度,请电脑登录imooc.com操作

我要和你站一起 - 内联元素

在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。

 div{
     display:inline;
 }

......

<div>我要变成内联元素</div>

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

小伙伴们你们观查一下右侧代码段,有没有发现一个问题,内联元素之间有一个间距问题,这个问题在本小节的 wiki 中有介绍,感兴趣的小伙伴可以去查看。

 

 

任务

我来试一试:感受一下内联元素的特点

在右侧代码编辑器中输入各种内联元素标签,试一试他们的特点。

这一小节没有正确性验证,单击“提交”按钮进入下一小节学习。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>行内元素标签</title>
  7. <style type="text/css">
  8. a,
  9.  
  10. span,
  11. em {
  12. background: pink;
  13. /*设置a、span、em标签背景颜色都为粉色*/
  14. }
  15. </style>
  16. </head>
  17.  
  18. <body>
  19. <a href="http://www.baidu.com">百度</a>
  20. <a href="http://www.imooc.com">慕课网</a>
  21. <span>33333</span>
  22. <span>44444</span><em>555555</em>
  23. </body>
  24.  
  25. </html>
下一节