Question

<div id="divT">divT</div>
<div id="divL">
<br><br>
<div id="person">Person</div>
<div id="father">Father</div>
</div>
<div id="divR">divR</div>

css

*{
    margin:0;
    padding:0;
}
html{
    height:100%;
}
body{
    margin:0 auto;
    height:100%;
}
#divT{
    width:100%;
    background:blue;
}
#divL{
    display:inline-block;
    width:14%;
    height:100%;
    background:#008080;
}
#divR{
    display:inline-block;
    width:79%;
    background:#e1e1e1;
}

为什么divR有左上边距和左边距？我不想要他们。

小提琴是here

Answer 1

FIDDLE

它没有边距。因为它是display:inline-block元素，所以顶部间距来自它需要垂直对齐到顶部，左边距来自它与它之前的<div>元素之间的文字空间。

添加：

#divR
{
    /* ... */
    vertical-align:top;
}

删除#divL和#divR之间的空格。

Answer 2

您需要在vertical-align:top的规则中添加#divR。

#divR {
    display:inline-block;
    width:79%;
    background:#e1e1e1;
    vertical-align:top;
}

<强> jsFiddle example

vartical-align的默认值是基线，而你需要顶部。

Answer 3

添加vertical-align: top将删除顶部空格，这不是边距，而是间隙。

删除div与前一个之间的空格将删除左侧空格。这是因为内联块元素将渲染代码中留下的空格

Answer 4

添加float:right并将width设置为86%中的#divR

#divR
{
    width:86%;
    background:#e1e1e1;
    float:right;
}

这是jsFiddle演示：http://jsfiddle.net/leniel/FcDsk/1/embedded/result/

Answer 5

正如其他人所说，将vertical-align: top;添加到#divR将解决最重要的问题。我个人最喜欢的白色空间修复是将父级的font-size设置为0，并将其恢复到具有字体本身的元素中。

在小提琴的情况下：

body {
    font-size: 0;
}
#divT{
    font-size: 14px;
}
#divL{
    font-size: 14px;
}
#divR{
    font-size: 14px;
    vertical-align: top;
}

http://jsfiddle.net/GzRp9/7/

如何放置两个div对齐

5 个答案: