DIV在使用内联块后下降[复制]

在使用DIV并设置为内联块（inline-block）时，可能会遇到元素下降（位置偏移）的问题。这种情况通常是由于浏览器默认的空白处理和基线对齐导致的。

基础概念

内联块（inline-block）：一种CSS布局模式，元素既具有内联元素的特性（如可以与其他内联元素在同一行显示），又具有块级元素的特性（如可以设置宽高）。
基线对齐：文本的基线对齐会影响内联块元素的位置。

问题原因

空白间隙：HTML中的空格、换行符等会被浏览器解析为一个空白字符，导致内联块元素之间出现间隙。
基线对齐：内联块元素的基线对齐可能导致元素位置偏移。

解决方法

消除空白间隙：
- 将HTML代码中的空格和换行符去掉。
- 使用负margin来抵消空白间隙。
- 使用负margin来抵消空白间隙。
- 使用负margin来抵消空白间隙。

设置垂直对齐方式：
- 使用vertical-align属性来调整内联块元素的垂直对齐方式。
- 使用vertical-align属性来调整内联块元素的垂直对齐方式。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline-block Example</title>
    <style>
        .inline-block {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-right: -4px; /* 消除空白间隙 */
            vertical-align: top; /* 垂直对齐 */
        }
    </style>
</head>
<body>
    <div class="inline-block">Element 1</div><div class="inline-block">Element 2</div>
</body>
</html>