HTML 行内元素和块级元素区别

299 阅读1分钟

一、行内元素

  1. 特点:
  • 行内元素与其他行内元素并排
  • 行内元素设置宽高无效,默认宽度就是文本内容宽度
  • 设置水平方向的 padding 和 margin 属性是有效的,设置垂直方向的 padding 和 margin 属性是无效的
  • 行内元素只能容纳文本级元素和内联元素(a标签中可以放块级元素,但是链接里面不能再放链接)
  1. 常见行内元素:
<span> 		//文档标签
<a>	  	//超链接标签
<select>	//选择器标签
<input>		//输入框标签
<img>		//图片标签
<i>		//斜体标签
<label>		//input元素定义标注标签

二、块级元素

  1. 特点
  • 块级元素总是从新的一行开始
  • 高度、宽度都是可控的
  • 宽度没有设置时,默认为100%
  • 块级元素中可以包含块级元素和行内元素
  1. 常见块级元素:
<div>
<p>		//段落标签
<h1-h6>	        //标题标签
<ul>		//无序列表标签
<ol>		//有序列表标签
<li>		//列表项目标签
<table>         //表格标签