HTML 标签详解：块标签、内联标签、内联块标签及 CSS 外边距设置

HTML 标签详解：块标签、内联标签、内联块标签及 CSS 外边距设置

一、HTML 标签分类

1. 块标签

• div
• h1
• p
• ul
• ol
• header
• footer
• nav
• section
• article

2. 内联标签

• a
• span
• img
• input
• select
• strong
• em

3. 内联块标签

• button
• label
• textarea
• img
• input

二、CSS 外边距设置

1. 设置外边距的常用方法

为一个类名为 'box' 的 div 元素设置外边距，可以通过以下方法：

• 简写方式

.box {
    margin: 20px 20px 25px 15px;
}

• 单独设置

.box {
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 25px;
    margin-left: 15px;
}

2. 最简书写方式

最简书写方式是使用简写方式，只需要在 margin 属性中按顺序依次写出上、右、下、左外边距的值即可。

.box {
    margin: 20px 20px 25px 15px;
}

注：

• 简写方式中，如果只写一个值，则表示上下左右外边距都为该值；
• 如果写两个值，则第一个值为上下外边距，第二个值为左右外边距；
• 如果写三个值，则第一个值为上外边距，第二个值为左右外边距，第三个值为下外边距；
• 如果写四个值，则分别表示上、右、下、左外边距。