1 
<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有上边距和左边距？我不想要他们。

小提琴在这里

4

5 回答 5

2

FIDDLE

它没有边距。由于它是一个display:inline-block元素，因此顶部间距来自它需要与顶部垂直对齐，而左侧间距来自它与它<div>之前的元素之间的文字空间。

添加这个：

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

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

于 2013-09-06T19:05:13.573 回答
2

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

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

jsFiddle 示例

vartical-align 的默认值是基线，你需要 top 代替。

于 2013-09-06T19:05:20.697 回答
2

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

删除 div 和前一个之间的空格将删除左边的空格。这是因为 inline-block 元素会渲染代码中留下的空格

于 2013-09-06T19:05:59.653 回答
2

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

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

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

于 2013-09-06T19:06:01.890 回答
2

正如其他人所说，添加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/

于 2013-09-06T19:11:07.613 回答