html 容器边缘未正确应用

r3i60tvu 于 2024-01-04 发布在其他

关注(0)|答案(1)|浏览(227)

我在CSS中的margin属性上遇到了一些问题。我将每个section标签设置为不同的颜色，并将每个section中的所有内容包含在div中。我的意图是拥有一个处理内容边距的容器，同时保持section标签接触在一起。然而，下面我提供了我的代码和结果的屏幕截图。它似乎是边缘适用于部分和分隔它们，相对于内容容器。有人知道为什么这样写吗？还有什么更好的方法？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>
<body>
  <body>
    <main class="card-container">
      <section class="sec-1">
        <div class="content-container">
          <h1>Join our community</h1>
          <h3>30-day, hassle-free money back guarantee</h3>
          <p>Gain access to our full library of tutorials along  with expert code reviews. 
          Perfect for any developers who are serious about honing their skills.</p>
        </div>
      </section>
      <section class="sec-2">
        <div class="content-container">
          <h2>Monthly Subscription</h2>
          <p>$29 per month</p>
          <p>Full access for less than $1 a day</p>
          <div class="btn-container">
            <button>Sign Up</button>
          </div>
        </div>
      </section>
      <section class="sec-3">
        <div class="content-container">
          <h2>Why us</h2>
          <ul>
            <li>Tutorials by industry experts</li>
            <li>Peer & expert code review</li>
            <li>Coding exercises</li>
            <li>Access to our GitHub repos</li>
            <li>Community forum</li>
            <li>Flashcard decks</li>
            <li>New videos every week</li>
          </ul>
        </div>
      </section>
    </main>
</body>
</html>

个字符

的数据
这里是期望的结果供参考：

的
我曾尝试在一个单独的项目中这样做，它的工作，但这个特定的项目是顽固的。

Html

来源：https://stackoverflow.com/questions/77712760/margin-of-container-not-applying-correctly

1条答案

按热度按时间

emeijp431#

使用填充，因为你必须提供内部空间，而不是外部空间：

**边距：**元素外部的空间，影响其相对于其他元素的位置。
**填充：**元素内部的空间，影响内容与元素边框之间的距离。

.content-container {
    padding: 2rem;
}

字符串

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Karla', sans-serif;
    color: #fff;
    background-color: hsl(204, 43%, 93%);
}
.card-container {
    margin: 0 2rem;
}
.content-container {
    padding: 2rem;
}
.sec-1 {
    background-color: #fff;
    color: black;
}
.sec-2 {
    background-color: hsl(179, 62%, 43%);
}
.sec-3 {
    background-color: hsla(179, 62%, 43%, 0.806);
}
ul {
    list-style: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
 
</head>
<body>
  <body>
    <main class="card-container">
      <section class="sec-1">
        <div class="content-container">
          <h1>Join our community</h1>
          <h3>30-day, hassle-free money back guarantee</h3>
          <p>Gain access to our full library of tutorials along  with expert code reviews. 
          Perfect for any developers who are serious about honing their skills.</p>
        </div>
      </section>
      <section class="sec-2">
        <div class="content-container">
          <h2>Monthly Subscription</h2>
          <p>$29 per month</p>
          <p>Full access for less than $1 a day</p>
          <div class="btn-container">
            <button>Sign Up</button>
          </div>
        </div>
      </section>
      <section class="sec-3">
        <div class="content-container">
          <h2>Why us</h2>
          <ul>
            <li>Tutorials by industry experts</li>
            <li>Peer & expert code review</li>
            <li>Coding exercises</li>
            <li>Access to our GitHub repos</li>
            <li>Community forum</li>
            <li>Flashcard decks</li>
            <li>New videos every week</li>
          </ul>
        </div>
      </section>
    </main>
</body>
</html>

展开查看全部

赞(0）回复(0）举报 2024-01-04

我来回答

html 容器边缘未正确应用

1条答案

相关问题

热门标签

最新问答