logo标签列表

移除CSS/HTML中的边距与内边距

htmlcss
3

我似乎无法消除整个网站上略微存在的边距/填充（当前正在进行Codecademy任务）。

我已经查看了整个文档，以查找我可能意外添加的任何边距或填充设置，但我似乎无法在任何地方找到它。是什么导致了网站两侧的空白区域？

以下是我的网站CSS和HTML：

/* Universal Styles */

html {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

body {
  border-style: border-box;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #4A4A4A;
}

.content {
  padding: 0;
  margin: 0;
}

header .content {
  display: flex;
  margin: 0 0;
  justify-content: space-between;
  align-items: center;
  height: 85px;
}

.desktop {
}

.desktop ul {
  display: flex;
}

.desktop li a {
  margin: auto 25px;
  display: flex;
  align-items: center;
}

.desktop img {
  height: 20px;
  width: 20px;
}

.mobile {
  display: none;
}

#sign-up-section {
  background-image: url("banner-landingpage.jpg");

  color: white;
}

#sign-up-section .content.center {
  background-color: #9DC20A;
  margin-top: 170px;
  margin-bottom: 170px;
  margin-left: 100px;

}

#sign-up-section .cursive {
  font-family: Damion, curisve;
  font-weight: 50;
  font-size: 3em;
}

#sign-up-section .striking {
  color: white;
  font-size: 50px;
  font-family: 'Rubik-Regular', sans-serif;
  line-height: 1.4;
}
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
  <link rel="stylesheet" href="./resources/css/style.css">
  <meta charset="UTF-8">
</head>
<body>
  <!-- Header -->
  <header>
    <div class="content">
      <a href="index.html" class="desktop logo">Fotomatic</a>
      <nav class="desktop">
        <ul>
          <li><a href="#">Product detail</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="https://www.instagram.com/">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
        </ul>
      </nav>
      <nav class="mobile">
        <ul>
          <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
          <li><a href="#" class="button">Join us</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <div class="main-content">

    <!-- Sign Up Section -->
    <div id="sign-up-section" class="banner">
      <div id="sign-up-cta">
        <div class="content center">
          <div class="header">
            <h2 class="cursive">Instant</h2>
            <h1 class="striking">FORMAT CAMERA</h1>
          </div>
          <div class="email">
            <span>
              Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
            </span>
            <div class="button">Join the waiting list</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Features Section -->
    <div id="features-section">
      <div class="feature">
        <div class="center">
          <div class="image-container">
            <img src="./resources/images/feature-1.png" />
          </div>
          <div class="./resources/content">
            <h2>Advanced, automatic, instant</h2>
            <h3>Shutter speed, apperture and flash output adjust automatically</h3>
          </div>
        </div>
      </div>
      <div class="feature">
        <div class="center">
          <div class="image-container">
            <img src="./resources/images/feature-2.png" />
          </div>
          <div class="content">
            <h2>Beautifully crafted inside-out</h2>
            <h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
          </div>
        </div>
      </div>
    </div>

    <!-- Filters Section -->
    <div id="filters-section">
      <div class="content center">
        <h2>Over 20+ filters to choose from</h2>
        <h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
      </div>
      <div class="images-container">
        <div class="image-container">
          <img src="./resources/images/filter-1.png" />
        </div>
        <div class="image-container">
          <img src="./resources/images/filter-2.png" />
        </div>
        <div class="image-container">
          <img src="./resources/images/filter-3.png" />
        </div>
        <div class="image-container extra">
          <img src="./resources/images/filter-4.png" />
        </div>
      </div>
    </div>

    <!-- Quotes Section
    <div id="quotes-section">
      <div class="content center">
        <span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
        <img class="quote-citation" src="./resources/images/photography-logo.png" />
      </div>
    </div>

    <!-- Footer -->
    <footer>
      <div class="content">
        <span class="copyright">© 2016  Fotomatic, All Rights Reserved</span>
        <span class="location">Designed in NYC</span>
      </div>
    </footer>

  </div>
</body>
</html>

只需添加body margin:0 auto;即可。 - godfather
4个回答
2
请在CSS样式中添加以下代码，可能会对您有所帮助：
* {
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
}
1

默认情况下，浏览器会对某些HTML元素添加样式，例如 body。为了避免麻烦并控制一切，您需要重置它们。此外，您需要在所有项目上设置 box-sizing: border-box;，这使得样式更加容易。

/* add those lines at the top of your css file: */
*,::after,::before{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
0

你应该在 CSS 代码的开头添加这个。

*,
*::before,
*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth; // this is optional but I prefer it for better user experience 
}
0

您可以通过硬编码整个页面的边距和填充设置来解决此问题：

body {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

这是所有CSS样式表都应该在开头添加的良好实践。

在您的原始body类中，您设置了一个无效的属性：

border-style: border-box;
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接