Question

所以我在这里有这个HTML和CSS：

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, World!</title>
        <link rel="stylesheet" type="text/css" href="assets/css/main.css">
    </head>
    <body>
        <div id="wrapper">
            <section id="sidebar">
                <section class="widget">
                This is a Widget. This type of widget is not collapsible.
                </section>
            </section><!-- I hate "display: inline-block;" whitespace
         --><main>
            </main>
        </div>
    </body>
</html>

的main.css：

*
{
    margin: 0;
    padding: 0;
}

html, body, #wrapper
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#sidebar
{
    display: inline-block;
    background-color: #5C1B88;

    width: 300px;
    height: 100%;
}

    #sidebar > .widget
    {
        width: 260px;
        height: 200px;
        margin: 0 20px;
        background-color: rgb(210, 211, 228);
    }

main {
    display: inline-block;
    background-color: #C2A1E7;
    height: 100%;
    width: calc(100% - 300px);
}

在Firefox和Chrome中，只要我在子项section#sidebar中有文字，section.widget就会被推下来。造成这种情况的原因是什么？

jsfiddle：https://jsfiddle.net/NeonGuilmon/k6qrbm04/embedded/result/

Answer 1

因为默认情况下，内联元素的vertical-align值为baseline。但是，只有在有任何内容时才适用。解决方案很简单，为vertical-align: top;定义#sidebar。

子部分内的文本将父部分向下推

1 个答案: