块级元素与行内元素的区别

112 阅读1分钟
  1. 块级元素可以设置宽度、高度、内边距(padding)和外边距(margin)。行内元素的高度、宽度及顶部和底部边距(margin)不可设置,但可以设置左右边距(margin)以及内边距(padding)。不过,左右内边距(padding)会改变元素所占用的水平空间,但元素的宽度不会改变,而是通过水平方向的内容溢出实现。

  2. 块级元素会独占一行或多行,其宽度默认为其父元素的100%,除非设置了特定的宽度。行内元素不会开始新的一行,它们会和其他元素并排显示。

  3. 常用块级元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

    常用内联元素:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>

    常用内联块元素:<img>、<input>

  4. 行内标签不能嵌套块级标签, 只能嵌套行内标签.而块级标签内部可以嵌套任意的块级标签和行内标签

  5. 内联块级元素特点:同时具备内联元素、块级元素的特点。(①和其他元素都在一行上。②元素的高度、宽度、行高以及顶和底边距都可设置)

可以通过CSS的display属性来改变元素的显示方式。例如,将display设置为block可以使行内元素变为块级元素,而设置为inline或inline-block则可以使块级元素表现得像行内元素。