HTML - 无法识别div之上差距背后的原因

时间：2014-12-20 19:48:58

标签： html css

我试图构建一个简单的目标网页，但我遇到了我认为对我来说是一个简单的疏忽，但我似乎无法指出我要去哪里错误。

如下图所示，我的问题是蓝色导航栏上方的间隙不应该存在。正如您将在下面的CSS代码中看到的，我在类main_div上没有边距。

enter image description here

有关为什么顶部的白色间隙存在的任何想法？

这是我的HTML（index.html）：

<!DOCTYPE html>
<html>

    <head>
       <meta charset='utf-8'>
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">

       <link rel="stylesheet" href="stylesheets/public.css">

       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

       <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/utilities/utilities.js&2.6.0/build/container/container_core-min.js"></script>

       <script type="text/javascript" src="scripts/carousel.js"></script>

       <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/base/base-min.css">

       <link href="stylesheets/carouseltwo.css" rel="stylesheet" type="text/css">

        <!-- Bootstrap Core CSS -->
        <link href="stylesheets/bootstrap.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="stylesheets/modern-business.css" rel="stylesheet">

        <!-- Custom Fonts -->
        <link href="font-awesome-4.1.0/stylesheets/font-awesome.min.css" rel="stylesheet" type="text/css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

       <title>Welcome</title>

    </head>

<body>

    <!-- Main div after topbar div -->
    <div class="main_div">

        <div id="topbar">
            <ul>
               <li><a href='#'><span>HOW IT WORKS</span></a></li>
               <li ><a href='#'><span>LOG IN</span></a></li>
            </ul>           
        </div>

        <!-- Welcome message -->
        <div class="welcome_message">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>

        <!-- Header Carousel -->
        <header id="myCarousel" class="carousel slide">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');">

                    </div>

                    <div class="carousel-caption">
                        <h2>Caption A</h2>
                    </div>
                </div>
                <div class="item">
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');">

                    </div>

                    <div class="carousel-caption">
                        <h2>Caption B</h2>
                    </div>
                </div>
                <div class="item">
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');">

                    </div>
                    <div class="carousel-caption">
                        <h2>Caption 3</h2>
                    </div>
                </div>
            </div>
        </header>

    </div>      
</body>

</html>

这是我的CSS（public.css）：

    html {height: 100%; width: 100%;}

body {
    height: 100%; 
    width: 100%;
    margin: 0; 
    padding: 0; 
    border: 0;
    font-family: "DINPro-Bold",Georgia,Serif;    
    font-size: 14px; 
    line-height: 15px;
}

/* Main div - this will hold all the componenets*/
.main_div {
  position: relative;
  height: 100%;
  width: 100%;  
}

/* Top bar*/
#topbar {
  background: #3399CC;
  height: 50px;
  width: 100%;
  border-bottom: 1px #808080;
  float: left;
}

/* Logo img button*/
#topbar img {
    position: relative;
    width: 125px;
    height: 25px;
    padding-left: 12px;
    padding-top: 12px;
    float: left;
}

/* ul */
#topbar ul {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: block;
    zoom: 1;
}

/* li */
#topbar ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
}

/* Insert a gap after every <ul> element */
#topbar ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* a */
#topbar ul li a {
  font-family: "DINPro-Bold",Georgia,Serif;
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  padding: 15px 15px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;  
}

#topbar ul li a:hover {
  color: #000000;
}

/* bullet point after the menu name */
#topbar ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #FFFFFF;
  opacity: .5;
}

#topbar ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #00FF00;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}

#topbar ul li.last > a:after,
#topbar ul li:last-child > a:after {
  display: none;
}

#topbar ul li.active a {
  color: #FFDD00;
}

#topbar ul li.active a:before {
  width: 100%;
}

#topbar.align-right li.last > a:after,
#topbar.align-right li:last-child > a:after {
  display: block;
}

#topbar.align-right li:first-child a:after {
  display: none;
}

/*Overall/Super div*/
.main_div {
  width: 100%;  
  float: left;
  font-family: "DINPro-Bold",Georgia,Serif; 
}

/* Welcome message div*/
.welcome_message {
  width: 100%;
  font-size: 25px;  
  float: left;
  color: #999999;
  padding: 10px;
  background: #FFCC00;
}

这是我的第二个CSS文件（modern-business.css）：

/* Global Styles */

html,
body {
    height: 100%;
}

body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

/* Home Page Carousel */

header.carousel {
    height: 50%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Pricing Page Styles */

.price {
    display: block;
    font-size: 50px;
    line-height: 50px;
}

.price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
}

.period {
    display: block;
    font-style: italic;
}

/* Footer Styles */

footer {
    margin: 50px 0;
}

/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
}

任何建议都表示赞赏。

编辑：我已经添加了modern-business.css文件

感谢。

1 个答案:

答案 0 :(得分：2)

你的代码在你的小提琴中工作正常，因为现代商业.css并不包含在小提琴中

但它包含：

body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

可能是你的问题的原因，删除或设置

body{padding:0px !important}

在你自己的样式表中。

相关问题
最新问题