行内元素(Inline Elements):
- 默认情况下,行内元素在水平方向上以行内的方式显示,不会独占一行。
- 行内元素只能容纳文本或其他行内元素,不能容纳块级元素。
- 行内元素的宽度和高度由其内容决定,无法设置固定的宽度和高度。
- 行内元素可以设置左右的外边距(margin)和内边距(padding),但上下外边距和内边距对行内元素不起作用。
- 常见的行内元素包括
<span>
、<a>
、<strong>
、<em>
、<img>
等。
块级元素(Block-level Elements):
- 默认情况下,块级元素会独占一行的空间,即使它们宽度没有填满父元素的水平空间。
- 块级元素可以包含其他块级元素和行内元素。
- 块级元素的宽度、高度、内外边距都可以通过 CSS 设置。
- 块级元素会自动在其前后创建换行。
- 常见的块级元素包括
<div>
、<p>
、<h1>
-<h6>
、<ul>
、<ol>
、<li>
、<table>
等。
通过 CSS 的 display
属性可以修改元素的显示方式,例如将行内元素设置为块级元素或将块级元素设置为行内元素,这样可以改变元素在页面中的布局和显示效果。