行内元素和块级元素是HTML中常见的两种元素类型,它们在布局和显示上有一些区别。
行内元素(Inline Elements):
- 默认情况下,行内元素不会独占一行,相邻的行内元素会排列在同一行上。
- 行内元素的宽度和高度由内容决定,无法设置固定的宽度和高度。
- 对于行内元素,垂直方向上的
margin
和padding
属性只会影响到元素自身的上下间距,不会改变元素所占的空间。 - 行内元素不能通过
display
属性设置为块级元素。
常见的行内元素包括<span>
、<a>
、<img>
、<strong>
等。
块级元素(Block-level Elements):
- 块级元素会独占一行,默认情况下从新的一行开始,并且下面会有一个新的换行符。
- 块级元素的宽度默认为父级容器的100%,可以通过设置宽度和高度来改变其尺寸。
- 块级元素可以通过
margin
和padding
属性设置水平和垂直方向上的间距。 - 块级元素可以通过
display
属性设置为行内元素或其他值,从而改变其显示和布局方式。
常见的块级元素包括<div>
、<p>
、<h1>
–<h6>
、<ul>
、<li>
等。
需要注意的是,HTML5中引入了一些新的元素类型,如<header>
、<nav>
、<article>
等,它们具有特定的语义含义,并且可以根据需要在样式中进行自定义。这些元素的默认显示行为可能是块级元素或行内元素,取决于浏览器的实现和CSS样式的设置。