个人中心
gpt4 book ai didi

html - 为什么顶部的边距不会改变？

转载 作者：太空宇宙 更新时间：2023-11-03 20:05:34 25 4
gpt4 key购买 nike

我正在尝试编辑导航栏链接上的边距，但是当我更改边距时，没有任何反应。有谁知道为什么会这样？

/* Whole Page or not one specific section */
main {
  text-align: center;
}

body {
  max-width: 100%;
  height: 100vh;
  margin: 0px 0px 0px 0px;
  color: #C2D3CD;
}

.topbar, nav {
  background-color: #847E89;
}

/* Top Bar */
#temp-logo, #donate-top {
  display: inline-block;
}

#donate-top {
  float: right;
  padding-right: 2%;
  padding-left: 2%;
  background-color: #C2D3CD;
  color: #847E89;
  height: 10vh;
  cursor: pointer;
}

.donate-name {
  padding-top: 4vh;
  background-color: #C2D3CD;
  border: none;
  cursor: pointer;
}

#temp-logo {
  padding-top: 0vh;
  margin-left: 2%;
  font-size: 22px;
}

.topbar {
  display: block;
  border-bottom: solid 1px #C2D3CD;
  height: 10vh;
}

/* Nav Bar */
nav {
  text-align: center;
  height: 7vh;
}

.link, link:visited {
  color: #C2D3CD;
  text-decoration: none;
}

#mission-link, #about-link, #donations-link, #contact-link {
  margin-top: 5%;
}

/* First Page */
#home-screen {
  background-image: url(Images/beach-background-1-NEW.jpg);
  height: 80vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.text {
  padding-top: 30vh;
}

/* Gallery */
.img {
  width: 20vw;
  height: 20vw;
}

.desc {
  display: inline-block;
  position: relative;
  margin: 1%;
}

.desc:hover img {
  filter: blur(1.5px) brightness(60%);
  transition: 0.3s;
  box-shadow: 0 0 10px gray;
}

.desc :not(img) {
  position: absolute;
  top: 37%;
  z-index: 1;
  text-align: center;
  width: 100%;
  color: #FFF;
  opacity: 0;
  transition: 0.3s;
}

.desc:hover :not(img) {
  opacity: 1;
}

.img:hover {
  transform: scale(1.1);
}
<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
    <title>Conejo Teen Organization</title>
  </head>
  <body>
    <!-- Top Bar -->
    <div class="topbar">
      <!-- Get logo ASAP -->
      <p id="temp-logo"><em>Conejo Teen Organization</em></p>
      <a id="donate-top" class="donate" href="#"><button class="donate-name">Donate</button></a>
    </div>
    <!-- Nav -->
    <nav> 
      <a id="mission-link" class="link" href="#">Mission</a>
      <a id="about-link" class="link" href="#">About Us</a>
      <a id="donations-link" class="link" href="#">What We Do</a>
      <a id="contact-link" class="link" href="#">Contact</a>
    </nav>
    <!-- Main -->
    <main>
      <!-- First Section -->
      <section id="home-screen">
       <article class="text">
        <h1 id="h1">Conejo Teen Organization</h1>
        <p id="h1-desc">Helping California teens in need since 2017</p>
        <button id="donate-home" class="donate">Donate Now!</button>
        </article>
      </section>
      <!-- Our Mission -->
      <section id="mission">
        <h2 id="mission-h2">Our Mission</h2>
        <p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
      </section>
      <!-- Image Gallery (images of projects) -->
      <section id="gallery">
        <h2 id="images">Gallery</h2>
        <!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
        <div class="row1 row">
          <!-- Image 1 -->
          <div class="desc-1 desc">
            <img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 2 -->
          <div class="desc desc-2">
            <img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 3 -->
          <div class="desc desc-1">
            <img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
        </div>
      </section>
    </main>
    <!-- Footer -->
    <footer>
      <p id="copyright">&copy 2018 Conejo Teen Organization</p>
      <p id="my-credit">Created by <a href="#">Jacob Pieczynski</a></p>
    </footer>
  </body>
</html>

最佳答案

您正在尝试将 margin-top 应用于 inline 元素，但您不能这样做，因为它会中断页面​​的流动:

#mission-link, #about-link, #donations-link, #contact-link {
  display: inline-block; /* Try making them inline block */
  margin-top: 5%;
}

尝试制作链接inline-block。

关于html - 为什么顶部的边距不会改变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51159200/

25 4 0
文章推荐： html - 单击栏图标时显示选项卡(响应式导航栏)
文章推荐： c# - 在没有反射的情况下迭代 C# 中对象的所有字段
文章推荐： c# - 名称 "Interlocked"有什么特殊含义吗？
文章推荐： c# - await CLGeocoder.GeocodeAddressAsync 从不返回
太空宇宙
个人简介

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

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