有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）

清除默认样式问题：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 使元素的宽度/高度包含了元素的边框(border)和内填充(padding) */
}

元素居中问题：

水平居中：

.center-horizontal {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

垂直居中：

.center-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

水平垂直居中：

.center-both {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

元素间的空白问题：

通常是由于元素间默认的换行导致的，解决方法是：

1. 去除空白：将多个元素写在同一行中。
2. 消除空格：将元素设置为在一行内显示。

去除空白示例：

<div>
    <span>First</span><span>Second</span><span>Third</span>
</div>

消除空格示例：

.no-space span {
    display: inline-block;
    margin: 0;
}

HTML结构使用上述CSS类：

<div class="no-space">
    <span>First</span>
    <span>Second</span>
    <span>Third</span>
</div>