Question

这是计划，我有一个标签包装，在其中，有一个标签包装顶部，其中有三个部分显示在行中。为什么它们之间有空格??

html

<html>
    <head>
        <title>Informação pessoal</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    </head>
    <body>
        <div class="tab-wrapper">
            <div id="tab-wrapper-top">
                <div id="tab-wrapper-left">
                    Left
                </div>
                <div id="tab-wrapper-middle">
                    Middle   
                </div>
                <div id="tab-wrapper-right">
                    Right
                </div>
            </div>
            <div class="separator"> Seperator </div>
            <div id="tab-wrapper-bottom"> Bottom wrapper</div>
        </div>
    </body>
</html>

CSS

/* Tabs */

.tab-wrapper {
    position: absolute;
    top: 90px;
    width: 98%;
    margin: 0 auto auto;
    -webkit-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
}


.tab-wrapper label {
    margin: 5px 10px 5px;
}

.tab-wrapper input {
    margin: 5px 10px 5px;
}

.tab-wrapper select {
    margin: 5px 10px 5px;    
}

.tab-wrapper textarea {
    margin: 5px 10px 5px;
    width: 90%;    
}

#tab-wrapper-top {
    display: block;
}

#tab-wrapper-left {
    display: inline-block;
    width: 43%;
    background-color: gray;
}


#tab-wrapper-middle {
    display: inline-block;
    width: 14%;
    background-color: blue;
}

#tab-wrapper-right {
    display: inline-block;
    background-color: green;
}

.separator {
    display: block;
    height: 30%;
    width: 100%;
    background-color: red;
}

Answer 1

HTML认为换行符是空格。连续的换行符会折叠到一个空格中。尝试

<div>Left</div><div>
Middle</div><div>
Right</div>

代替。注意关闭/打开标签是如何彼此紧邻的。

现在看来，你已经

了

<div>Left</div>[linebreak][tab][tab]<div> etc...

换行符/制表符向下折叠为单个空格字符等效值，并将div分开。

Answer 2

这是因为代码中有空格。试试这个。

<html>
    <head>
        <title>Informação pessoal</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    </head>
    <body>
        <div class="tab-wrapper">
            <div id="tab-wrapper-top">
                <div id="tab-wrapper-left">Left</div>
                <div id="tab-wrapper-middle">Middle</div>
                <div id="tab-wrapper-right">Right</div>
            </div>
            <div class="separator">Seperator</div>
            <div id="tab-wrapper-bottom">Bottom wrapper</div>
        </div>
    </body>
</html>

为什么这些div之间有空格？

2 个答案: