Html 两个 div 之间的匿名空白

Anonymous white space between two divs

提问by Rajaprabhu Aravindasamy

Here is the Fiddle,

这里是小提琴，

I have two divsone is for header and the other is for the main body. Inside the divwhich is for header, i'm having another divand that div was floated left. Due to that floating, a white space has occurred between those two divs(between the div for header and div for main body).

我有两个divs一个用于标题，另一个用于主体。在div用于标题的里面，我有另一个div，那个 div 是floated left. 因此floating，在这两者divs之间（标题的 div 和主体的 div 之间）出现了空白。

[Note: Please refer #DivLogoin the css section of the fiddle]

[注：请参考#DivLogofiddle的css部分]

My question is, why this kind of problem is raising due to floating.?

我的问题是，为什么这种问题会因浮动而引发。？

回答by CodeMoose

It's an artifact of having your #DivHeader be inline-block. Change it to display: blockand set overflow: hidden;to contain the floats. See http://jsfiddle.net/jhcUb/

这是让您的 #DivHeader 成为的神器inline-block。将其更改为display: block并设置overflow: hidden;为包含浮点数。见http://jsfiddle.net/jhcUb/

回答by raam86

apply

申请

float:left;

to #DivHeaderin order to contain it's descendants

要#DivHeader以遏制它的后代

remove

消除

position:relative;

from #DivMain

从 #DivMain

see fiddle

看小提琴

回答by Marc Audet

Why The Behavior With inline-block

为什么内联块的行为

Your original CSS is as follows:

您的原始 CSS 如下：

#DivHeader
{
    position:relative;
    display:inline-block;
    width:100%;
    font-family: Century Gothic, sans-serif;
    background-color:#3b5998;
}

There are two children elements of #DivHeader, one is floated and one is absolutely positioned, and as such, do not contribute to the height of #DivHeader.

有两个子元素#DivHeader，一个是浮动的，一个是绝对定位的，因此不会影响 的高度#DivHeader。

Suppose, that you had set display: block, you would have seen the red background painted from the top left corner of the page and you would not see the header.

假设您设置了display: block，您会看到从页面左上角绘制的红色背景，而不会看到标题。

This is because you set #DivMainto position: relative, so you created a new stacking context that is painted over the previously rendered elements.

这是因为您设置#DivMain为position: relative，因此您创建了一个新的堆叠上下文，该上下文绘制在先前呈现的元素上。

If you had set position: staticto #DivMain, you would see the header content from the floated element.

如果您设置position: static为#DivMain，您将看到浮动元素的标题内容。

So, getting back to #DivHeader, by using display: inline-block, the element now recognizes the white space in your HTML document, creates an anonymous inline box, which means that #DivHeadernow has content. Since there is white space after the float, that means the clearance resulting from the float contributes to the inline-block and you see the background color and so on.

因此，回到#DivHeader，通过使用display: inline-block，元素现在可以识别 HTML 文档中的空白，创建一个匿名内联框，这意味着#DivHeader现在有内容。由于浮动后有空白，这意味着浮动产生的间隙有助于内联块，您会看到背景颜色等。

Fixing the problem is easy enough, on DivHeaderset overflow: autoand display: block.

解决这个问题是很容易的，在DivHeader集overflow: auto和display: block。

One more thing, if you had not floated #DivLogo, you would not see the problem because the larger font sizes in the logo elements would shift the baseline enough so that the white space being recognized by the inline-block would not matter.

还有一件事，如果您没有 float #DivLogo，您将不会看到问题，因为徽标元素中较大的字体大小会充分移动基线，因此内联块识别的空白将无关紧要。

Quite a bit going on here!

这里发生了相当多的事情！

回答by michalzuber

Have a look at http://jsfiddle.net/y6hSV/3/

看看http://jsfiddle.net/y6hSV/3/

HTML

HTML

<div id="DivHeader">

    <div id="DivLogo">

    <span class="Logo" id="SpLogo">Header</span><br/>
    <span class="Logo" id="SpSlogan">{sub header}</span>

    </div>

    <div id="DivPrabhu">
        <a  href="http://google.com">Who?</a>
        <a  href="https://www.facebook.com">Connect</a>
        <a href="#">Feedback/Bugs</a>
    </div>

</div>

<div id="DivMain">
 Some text to have layout
</div>

CSS

CSS

html,body
{
margin:0;
padding:0;
}

#DivHeader
{
float: left;
width:100%;
font-family: Century Gothic, sans-serif;
background-color:#3b5998;
}

#DivLogo
{
    position:relative;
    float:left;         /*please remove this property and run*/ 
    padding-bottom:10px;
    padding-top:10px
}

.Logo
{
    margin-left:20px;
    margin-right:20px;
    color:#fff; 
}

#SpLogo
{

    font-size:35px;
    font-weight:bold;
}

#SpSlogan
{
    font-size:20px;
}

#DivPrabhu{
    float: right;
    margin-top: 30px;
    font-size:13px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}


#DivPrabhu a{
    text-decoration:none;
    color:#fff;
    margin-left:15px;
}

#DivPrabhu a:hover{
    text-decoration:underline;
}

#DivMain{
    height:600px;
    width; 100%;
    background-color:red;
}

回答by Mohammad Areeb Siddiqui

Adding top: -5px;to #DivMainsolves your problem!! :)

添加top: -5px;来#DivMain解决你的问题！！:)

See the fiddle here.

请参阅此处的小提琴。