上查看所有课程
HTML 元素可大致分为两类
- 内联元素：
<span>,<a>,<strong>,<img>等。 - 块级元素：
<p>,<div>,<h1>,<figure>等。
HTML 内联元素
内联元素显示在同一行。它们不会在新行开始，并且只占用其内容所需的宽度。内联元素的一个例子是 <span> 标签。
<p>This is how <span style="border: 1px solid black">span</span> works. </p>浏览器输出
如果我们有多个 span 标签，它们会放在同一行。例如，
<p> The following spans will be inline; <span style="border: 1px solid black">Span 1</span> and <span style="border: 1px solid black">Span 2</span>.</p>浏览器输出
内联元素的一些例子是
- HTML
<a>标签 - HTML
<input>标签 - HTML
<span>标签
大多数 HTML 格式化标签也是内联的。例如
- HTML
<b>标签 - HTML
<em>标签 - HTML
<strong>标签等
HTML 块级元素
块级元素占用其容器中所有可用的水平空间。它们在新行开始，并占用其内容所需的高度。
块级元素的一个例子是 HTML 段落标签。
<p style="border: 1px solid black">This is how block elements works. </p>浏览器输出
如果我们有多个块级元素，它们将各自占据单独的一行。例如，
<p style="border: 1px solid black">Paragraphs are</p> <p style="border: 1px solid black">Block Elements.</p>浏览器输出
一些常用的块级元素是
- HTML
<div>标签 - HTML 标题
<h1>-<h6> - HTML
<p>标签等
CSS 与 HTML 内联和块级元素
内联元素中的高度和宽度
CSS 属性 height 和 width 对内联元素没有影响。
<p> The following span is an <span style="border: 1px solid black">Inline Element.</span></p>
<style>
span {
height: 200px; /* No Effect on Element */
width: 200px; /* No Effect on Element */
}
</style>浏览器输出
内联元素中的外边距
内联元素也没有顶部和底部外边距，它们只遵循左右外边距。
<div><span>1</span><span>2</span></div>
<div><span>3</span><span>4</span></div>
<style>
span {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
border: 1px solid black;
}
</style>浏览器输出
内联元素中的内边距
内联元素遵循所有方向的内边距。
<p><span>This is a span</span></p>
<style>
span {
padding: 10px;
border: 1px solid black;
}
</style>浏览器输出
块级元素中的高度和宽度
块级元素遵循 height 和 width 属性。我们可以使用 CSS 更改块级元素的宽度和高度。
<p style="border: 1px solid black;">This paragraph is a block element.</p>
<style>
p {
height: 200px; /* This works */
width: 200px; /* This works */
}
</style>浏览器输出
带父容器的块级元素
即使我们将块级元素的宽度设置为较小，它们也会占用父容器的整个宽度。因此，如果没有 CSS，我们不能在同一行中包含一个块级元素和另一个元素。例如，
<p style="width: 20px; border: 1px solid black;background-color: lightblue">1</p><p style="width: 20px; border: 1px solid black; background-color: lightblue">2</p>浏览器输出
块级元素中的外边距和内边距
块级元素也遵循顶部和底部外边距以及内边距方向。例如，
<div>Block</div>
<div>Block</div>
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
</style>浏览器输出
