个人中心
gpt4 book ai didi

html - 这是 margin 崩溃的问题吗？其他人如何最佳地处理这个问题

转载 作者：行者123 更新时间：2023-11-28 00:05:00 26 4
gpt4 key购买 nike

我正在学习 HTML 和 CSS，并且遇到了一个问题，即兄弟元素之间存在很大差距。

我在 stack overflow 和 web 上做了一些搜索，认为这是由 margin collapse 引起的。

我在 CSS 中添加了三行注释(两行在 .home-section 选择器中，一行在 .products-section 选择器) 并且这些中的每一个似乎都单独解决了问题但我不知道这些是否是最佳解决方案或者我没有在其他地方正确构建我的代码。我不想养成任何坏习惯。

非常感谢任何帮助，如果你能给我指出任何关于该主题的面向初学者的阅读 Material ，那也将是极好的。

Codepen

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Archivo+Black|Montserrat:400,800|Sacramento" rel="stylesheet">

    <title>Test banner</title>

  </head>

  <body>

    <header class="banner">

      <div class="logo">
        <img src="../images/iconfinder_umbrella-rain-summer-sun-protection_2189569.svg" alt="Umbrella logo">
      </div>

      <ul class="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#products">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li class="collapsed-menu"><a href="#"><i class="fas fa-bars fa-lg"></i></a></li>
      </ul>

    </header>

    <section id="home" class="home-section">

      <div class="text-block">
        <h6>What we do</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </div>

    </section>

    <section id="products" class="products-section">
      <div class="product1">
        <h6>Product 1</h6>
      </div>
    </section>

  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

.banner {
  height: 7vh;
  width: 100vw;
  background-color: #096386;
  position: fixed;
  z-index: 10;
  top: 0;
}

.logo {
  margin-left: 3vw;
  height: 7vh;
  line-height: 7vh;
  display: inline-block;
}
.logo img {
  height: 6vh;
  vertical-align: middle;
}

.nav {
  float: right;
  list-style: none;
  margin-right: 3vw;
  line-height: 7vh;
}
.nav li {
  display: inline-block;
  font-size: 1.5em;
  margin: auto;
}
.nav li a {
  margin: 1vh;
  color: #f0eec8;
  text-decoration: none;
  padding: 0.5vh 1vh;
}
.nav li a:hover {
  background-color: #f0eec8;
  padding: 0.5vh 1vh;
  border-radius: 3px;
  color: #096386;
}
.nav li a i {
  color: #f0eec8;
}
.nav .collapsed-menu {
  display: none;
}

.home-section {
  height: 100vh;
  width: 100vw;
  //border: 1px red solid;
  //margin-bottom: -15vh;
}
.home-section::after {
  content: "";
  height: 100vh;
  background-color: lightblue;
  opacity: 0.6;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.home-section .text-block {
  width: 40vw;
  margin-top: 15vh;
  margin-left: 10vh;
  padding: 2vh;
  position: relative;
  max-height: 70vh;
  overflow: hidden;
}
.home-section .text-block::after {
  content: "";
  background-color: #b3b3b3;
  border-radius: 3vh;
  opacity: 0.8;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.home-section .text-block h6 {
  font-family: "Archivo Black", sans-serif;
  font-size: 3em;
  padding-bottom: 1vh;
}
.home-section .text-block p {
  opacity: 1;
  font-size: 1.3em;
  text-align: justify;
}

.products-section {
  height: 100vh;
  width: 100vw;
  background-color: #f0eec8;
  z-index: 20;
  //margin-top: -15vh;
}

/*# sourceMappingURL=main.css.map */

最佳答案

如果你在 position:absolute; 中使用 :before 或 :after 伪元素，那么你需要将 parent 设为 position:relative; ，根据标题高度和其他填充更改更改 margin-top:7vh;

可以引用自cssnewbie和来自 here 的 margin-padding 

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

.banner {
  height: 7vh;
  width: 100vw;
  background-color: #096386;
  position: fixed;
  z-index: 10;
  top: 0;
}

.logo {
  margin-left: 3vw;
  height: 7vh;
  line-height: 7vh;
  display: inline-block;
}
.logo img {
  height: 6vh;
  vertical-align: middle;
}

.nav {
  float: right;
  list-style: none;
  margin-right: 3vw;
  line-height: 7vh;
}
.nav li {
  display: inline-block;
  font-size: 1.5em;
  margin: auto;
}
.nav li a {
  margin: 1vh;
  color: #f0eec8;
  text-decoration: none;
  padding: 0.5vh 1vh;
}
.nav li a:hover {
  background-color: #f0eec8;
  padding: 0.5vh 1vh;
  border-radius: 3px;
  color: #096386;
}
.nav li a i {
  color: #f0eec8;
}
.nav .collapsed-menu {
  display: none;
}

.home-section {
  height: 100vh;
  width: 100vw;
  position:relative;
  padding: 2vh 0vh;
}
.home-section::after {
  content: "";
  height: 100vh;
  background-color: lightblue;
  opacity: 0.6;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.home-section .text-block {
  width: 40vw;
  margin-top: 7vh;
  padding-top:7vh;
  margin-left: 10vh;
  padding: 2vh;
  position: relative;
  max-height: 70vh;
  overflow: hidden;
}
.home-section .text-block::after {
  content: "";
  background-color: #b3b3b3;
  border-radius: 3vh;
  opacity: 0.8;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.home-section .text-block h6 {
  font-family: "Archivo Black", sans-serif;
  font-size: 3em;
  padding-bottom: 1vh;
}
.home-section .text-block p {
  opacity: 1;
  font-size: 1.3em;
  text-align: justify;
}

.products-section {
  height: 100vh;
  width: 100vw;
  background-color: #f0eec8;
  z-index: 20;
  //margin-top: -15vh;
}

/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Archivo+Black|Montserrat:400,800|Sacramento" rel="stylesheet">

    <title>Test banner</title>

  </head>

  <body>

    <header class="banner">

      <div class="logo">
        <img src="../images/iconfinder_umbrella-rain-summer-sun-protection_2189569.svg" alt="Umbrella logo">
      </div>

      <ul class="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#products">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li class="collapsed-menu"><a href="#"><i class="fas fa-bars fa-lg"></i></a></li>
      </ul>

    </header>

    <section id="home" class="home-section">

      <div class="text-block">
        <h6>What we do</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        
      </div>

    </section>

    <section id="products" class="products-section">
      <div class="product1">
        <h6>Product 1</h6>
      </div>
    </section>

  </body>
</html>

关于html - 这是 margin 崩溃的问题吗？其他人如何最佳地处理这个问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55760750/

26 4 0
文章推荐： javascript - 如何使用 javascript 编写我的按钮 onclick？
文章推荐： javascript - 安装 Firefox 插件后打开特定网址
文章推荐： javascript - 指令无法替换模板中的变量 : Syntax Error
文章推荐： css - 使用 Gulp、PostCSS 和 PurgeCSS 压缩 SASS
行者123
个人简介

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

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