个人中心
gpt4 book ai didi

HTML - 无法确定 div 上方间隙背后的原因

转载 作者：太空宇宙 更新时间：2023-11-04 03:23:10 24 4
gpt4 key购买 nike

我正在尝试构建一个简单的着陆页，但我遇到了我认为是我的一个简单疏忽，但我似乎无法指出我哪里出错的问题。

如下图所示，我的问题是蓝色导航栏上方的空白不应该存在。正如您将在下面的 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 文件

谢谢。

最佳答案

你的代码在你的 fiddle 中运行良好，因为 modern-business.css 不包含在 fiddle 中

但是它包含:

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}

在你自己的样式表中。

关于HTML - 无法确定 div 上方间隙背后的原因，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27583740/

24 4 0
文章推荐： python - 特定的列宽和与 savetxt 对齐
文章推荐： python - Node-Sass即使安装也找不到python
文章推荐： Python argparse 忽略连接的参数？
文章推荐： c - 保存 RenderCopyEx
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com