[分享]css内联元素和块级的区别

在CSS中，有两个基本的元素类型：内联元素和块级元素。尽管它们看似十分相似，但它们在很多方面却是完全不同的。首先，块级元素能够基于网页流自己形成一个独立的“块”，而内联元素则是在文档流中余下的标记。也...

在CSS中，有两个基本的元素类型：内联元素和块级元素。尽管它们看似十分相似，但它们在很多方面却是完全不同的。

首先，块级元素能够基于网页流自己形成一个独立的“块”，而内联元素则是在文档流中余下的标记。也就是说，内联元素的宽度和高度只有在其中添加内容后才能确定。如果你想让一个元素占据一整行，那么你就要使用块级元素。

p {
  display: block;
} 

另一个不同之处在于内联和块级元素对于其它元素的相互作用。内联元素通常与其它内联元素在同一行内显示，而块级元素会形成一个独立块，并把前后的元素都推到新的一行。例如，一个paragraph元素就会一直占据一整个行，而链接元素则会紧跟在页面中某个位置的文本后面。

a {
  display: inline;
} 

最后，另一个区别在于元素的默认宽度。作为一个块级元素，默认宽度是铺满整个父元素，而内联元素只占据它们实际需要的空间。有时候，这个差异会导致内联元素之间产生不必要的空白。实际上，任何两个内联元素之间的空白（回车、空格等）都会被解释为一个空格，这会使它们之间的距离看起来很奇怪。

span {
  display: inline-block;
} 

在构建网页时，内联和块级元素之间的转换是非常常见的。你可以通过CSS中的"display"属性手动设置元素类型，以此来对任何元素进行升级或降级。