Question

在上面的例子中，logo有一个正确的边距，我无法将menu放在它附近而不调整它（它应该是100x100）或者它被推到它下面。保证金来自哪里，如何摆脱它？

按要求编码。

<body>
    <div id="header">
        <div id="logo">logo</div>
        <div id="menu">menu</div>
    </div>
    <div id="cont">under</div>
</body>


#header {
    width:200px;
    height:100px;
    outline:solid 1px black;
}
#logo {  display:inline-block;
    width:100px;
    height:100px;
    outline:solid 1px black;
}
#menu {
    display:inline-block;
    width:96px;
    height:96px;
    outline:solid 1px black;
}
#cont {
    outline:solid 1px black;
    width:200px;
    height:300px;
}

Answer 1

正如我在评论中提到的那样，当您将元素设置为内联框时，您正在处理来自HTML代码的空白区域。

有很多方法，提供的一个例子是从代码中删除它。 logo</div><div id="menu"如下所示：http://jsfiddle.net/6CQUT/2/

但最好的，我想是链接到一些教程来了解发生了什么（从搜索引擎中获取的链接:)）：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

http://davidwalsh.name/remove-whitespace-inline-block

How to remove the space between inline-block elements?

Answer 2

一种选择是保留display: inline-block并添加：http://codepen.io/pageaffairs/pen/fKkbE

#header {
  word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
  display:table;/* Webkit Fix */
}

#header div {
  word-spacing:0; /* reset from parent*/
}

Answer 3

我有同样的问题。在CSS边距中：-2px;似乎为我解决了这个问题。

为什么这个div有保证金

3 个答案: