个人中心
gpt4 book ai didi

html - 我的标题和导航 div 之间有一个未知的间隙/空间。我试过查找答案，但似乎没有任何解决方法

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

我已经尝试将我的标题 div 的边距底部设置为 0，并将我的导航 div 的边距顶部设置为 0。似乎没有任何效果。

当我在我的导航 div 上设置我的 margin-bottom 时，我肯定可以在我的导航和容器 div 之间添加空间没问题。

我似乎无法控制导航 div 相对于我的航向的移动。

* {
  box-sizing: border-box;
}

a:link {
  color: black;
}

a:hover {
  color: white;
}

ul {
  padding: 0;
  list-style-type: none;
}

.container {
  width: 1000px;
  background: red;
  margin: 0 auto;
}

.heading {
  height: 100px;
  background: beige;
  text-align: center;
  font-size: 20pt;
  text-shadow: 0.1em 0.1em white;
  font-family: "cookie";
}

.navigation {
  height: 50px;
  width: 1000px;
  background: lightblue;
  font-family: sans-serif;
  line-height: 50px;
  text-align: center;
}

.navigation ul li {
  display: inline;
  margin: 0 40px;
}

.navigation ul li a {
  text-decoration: none;
}

.content {
  min-height: 600px;
  background: beige;
  width: 666px;
  float: left;
  margin-bottom: 10px;
  padding: 0 15px;
  text-align: center;
  font-family: sans-serif;
}

.content-heading {
  font-family: sans-serif;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
}

.sidebar-heading {
  min-height: 50px;
  width: 334px;
  background: lightgreen;
  float: right;
  text-align: center;
  font-family: sans-serif;
}

.sidebar-content {
  width: 334px;
  min-height: 550px;
  background: lightgreen;
  float: right;
  padding: 0 15px;
  text-align: center;
  font-family: sans-serif;
  margin-bottom: 10px;
}

.footer {
  clear: both;
  background: lightblue;
  height: 50px;
  text-align: center;
  font-family: sans-serif;
}

.heading-child {
  line-height: 100px;
}

.sidebar-heading-child {
  line-height: 50px;
}

.footer-child {
  line-height: 50px;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        families: ["Cookie:regular"]
      }
    });
  </script>
</head>
</head>

<body>
  <div class="container">
    <div class="heading">
      <h1 class="heading-child">All I Want is Whirled Peas!</h1>
    </div>
    <div class="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Account</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="content">
      <div class="content-heading"><strong>Welcome</strong></div>
      This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content
      of the content section. This is content of the content section. This is content of the content section. This is content of the content section.
    </div>

    <div class="sidebar-heading">
      <div class="sidebar-heading-child"><strong>Additional Info</strong></div>
    </div>
    <div class="sidebar-content">
      Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello
      this is sidebar content. Hello this is sidebar content.
    </div>

    <div class="footer">
      <div class="footer-child">Website created by Josh &copy 2017</div>
    </div>
  </div>
</body>

</html>

最佳答案

默认 h1 和 ul 标签从顶部和底部获取一些 margin，只需将其设置为 margin:0。检查下面的代码片段。

 WebFont.load({
      google: {
        families: ["Cookie:regular"]
      }
    });
 *{
     box-sizing: border-box;
 }

 a:link {
     color: black;
 }

 a:hover {
     color: white;
 }

 ul {
     padding: 0;
     margin: 0px;
     list-style-type: none;
 }

 .container {
     width: 1000px;
     background: red;
     margin: 0 auto;
 }

 .heading {
     height: 100px;
     background: beige;
     text-align: center;
     font-size: 20pt;
     text-shadow: 0.1em 0.1em white;
     font-family: "cookie";
 }

 .navigation {
     height: 50px;
     width: 1000px;
     background: lightblue;
     font-family: sans-serif;
     line-height: 50px;
     text-align: center;
 }

 .navigation ul li {
     display: inline;
     margin: 0 40px;
 }

 .navigation ul li a {
     text-decoration: none;
 }

 .content {
     min-height: 600px;
     background: beige;
     width: 666px;
     float: left;
     margin-bottom: 10px;
     padding: 0 15px;
     text-align: center;
     font-family: sans-serif;
 }

 .content-heading {
     font-family: sans-serif;
     min-height: 50px;
     line-height: 50px;
     text-align: center;
 }

 .sidebar-heading {
     min-height: 50px;
     width: 334px;
     background: lightgreen;
     float: right;
     text-align: center;
     font-family: sans-serif;
 }

 .sidebar-content {
     width: 334px;
     min-height: 550px;
     background: lightgreen;
     float: right;
     padding: 0 15px;
     text-align: center;
     font-family: sans-serif;
     margin-bottom: 10px;
 }

 .footer {
     clear: both;
     background: lightblue;
     height: 50px;
     text-align: center;
     font-family: sans-serif;
 }

 .heading-child {
     line-height: 100px;
 }

 .sidebar-heading-child {
     line-height: 50px;
 }

 .footer-child {
     line-height: 50px;
 }

 h1 {
     margin: 0px;
 }
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
 
<div class="container">
    <div class="heading">
        <h1 class="heading-child">All I Want is Whirled Peas!</h1>
    </div>
    <div class="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Account</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div class="content">
        <div class="content-heading"><strong>Welcome</strong></div>
        This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section.
    </div>

    <div class="sidebar-heading">
        <div class="sidebar-heading-child"><strong>Additional Info</strong></div>
    </div>
    <div class="sidebar-content">
        Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content.
    </div>

    <div class="footer">
        <div class="footer-child">Website created by Josh &copy 2017</div>
    </div>
</div>

关于html - 我的标题和导航 div 之间有一个未知的间隙/空间。我试过查找答案，但似乎没有任何解决方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44043923/

25 4 0
文章推荐： javascript - react native 绝对定位不起作用
文章推荐： c# - 为盲人提供无障碍应用
文章推荐： java - 使用 Uploadify 链接到 Servlet - 语法
文章推荐： html - 简单的引导导航栏，不会折叠并且按钮向右
太空宇宙
个人简介

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

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