额外的垂直空间增加，而不需要(extra vertical space added while not needed)

我无法弄清楚为什么我在2个div之间有一个额外的垂直空间

这里是小提琴链接https://jsfiddle.net/karimmtlc/bqt1r4y2/

这里是代码：

<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="row-fluid"> <div id="voyage_map" style="width: 100%; height: 400px; padding:0px;margin:0px;background-color:blue;"> </div> <div id="voyage_map_container" style="z-index:1000000000000; background: rgba(0, 0, 0, 0.6);position:relative;top:-120px; min-height:120px; color:white;padding-top:0px;padding-left:10px;padding-right:10px; padding-bottom:5px;"><div class="row"><div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" style="padding-top:2px;"><h3 style="padding-top:0px;"><strong>Title here</strong></h3><div id="trun3">Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhj shs sbsbhsbds sbsdbsbd Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy! Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!</div></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right" style="padding-top:5px;"><h3 style="padding-top:2px;"><strong>MAY 26TH-29TH 2015</strong></h3></div></div></div> <div style="background-color: green;min-height=100;">ssdsdsdsdsd</div> </div> </body> </html>

我想摆脱的额外垂直空间是在灰色背景和绿色背景之间。

谢谢

I am having trouble to figure out why I have an extra vertical space between 2 divs

Here is the fiddle link https://jsfiddle.net/karimmtlc/bqt1r4y2/

and here is the code:

<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="row-fluid"> <div id="voyage_map" style="width: 100%; height: 400px; padding:0px;margin:0px;background-color:blue;"> </div> <div id="voyage_map_container" style="z-index:1000000000000; background: rgba(0, 0, 0, 0.6);position:relative;top:-120px; min-height:120px; color:white;padding-top:0px;padding-left:10px;padding-right:10px; padding-bottom:5px;"><div class="row"><div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" style="padding-top:2px;"><h3 style="padding-top:0px;"><strong>Title here</strong></h3><div id="trun3">Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhj shs sbsbhsbds sbsdbsbd Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy! Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!</div></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right" style="padding-top:5px;"><h3 style="padding-top:2px;"><strong>MAY 26TH-29TH 2015</strong></h3></div></div></div> <div style="background-color: green;min-height=100;">ssdsdsdsdsd</div> </div> </body> </html>

The extra vertical space that i want to get rid of is between the gray background and the green background.

Thanks

最满意答案

您的div #voyage_map_container是相对定位的，并且具有top:-120px; 。

编辑以下内容：

至：

如果按照设计，您需要将该元素定位为像现在这样定位，则还可以添加margin-bottom: -120px; 到相同的元素，以“拉”下面的元素。

Your div #voyage_map_container is relative positioned and has top:-120px;.

Edit the following:

To:

If by design you need to have that element positioned like you have now, you can also add margin-bottom: -120px; to the same element in order to "pull" the elements bellow.

更多推荐

px,style,id,电脑培训,计算机培训,IT培训"/> <meta name="description"