如何從css中的div中洗掉空格？[復制]-有解無憂

這個問題在這里已經有了答案：如何洗掉 HTML 標頭上方的空格（邊距）？ (8 個回答) 11 小時前關閉。

我想洗掉為什么我們容器上方的空格。該網站采用移動優先方法設計，因此您將無法在大螢屏上看到空白。

有一個名為 wrapper 的類，我用它來包裝訂閱和描述類。有什么方法可以從包裝類 div 中洗掉空格。

如何從css中的div中洗掉空格？[復制]

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}


:root {
    --color-primary: hsl(179, 61%, 44%);
    --color-second: hsl(71, 73%, 54%);
    --color-subtext: hsl(204, 43%, 93%);
    --color-text: hsl(218, 22%, 67%);
    --color-box: hsl(179, 47%, 52%);

}

body {
    font-family: 'Karla';
    background-color: var(--color-subtext);
}

.container {
    display: flex;
    flex-direction: column;
    max-width: 350px;
    min-width: 350px;
    margin: 50px auto;
}

.container>.header {
    background-color: hsl(0, 0%, 100%);
    padding: 20px;
    line-height: 2;
    font-weight: 400;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.paragraph-1 {
    color: var(--color-text);
}

h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}


h2 {
    font-size: 1em;
    color: var(--color-second);
}

h3 {
    font-weight: 400;
}

.subscription {
    background-color: var(--color-primary);
    color: white;
    padding-top: 5px;
    padding-left: 30px;
    padding-bottom: 20px;
}

.dollar {
    font-size: 2em;
    font-weight: 400;
    padding-right: 10px;
}

.month {
    font-size: 1em;
    opacity: 0.5;
}

p {
    padding-bottom: 20px;
}

.btn-primary {
    font-size: 1em;
    font-weight: 700;
    width: 85%;
    margin-bottom: 15px;
    padding-block: min(3vh, 1em);
    background-color: var(--color-second);
    color: white;
    border: 1px solid var(--color-second);
    border-radius: 5px;
    cursor: pointer;

}


h4 {
    font-weight: 400;
    color: white;
    padding-left: 30px;
}

.description {
    background-color: var(--color-box);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.desc-2 {
    list-style: none;
    padding-left: 30px;
}

.desc-2>li {
    color: white;
    opacity: 0.7;
    font-size: 0.9em;
    line-height: 1.5;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

@media (min-width: 768px) {
    .container {
        max-width: 50%;
        /* display: flex; */
        /* display: grid; */
        /* display: grid; */
        /* grid-auto-flow: column; */
    }

    .wrapper {
        display: grid;
        grid-auto-flow: column;
    }

    .subscription {

        border-bottom-left-radius: 12px;
        /* grid-auto-flow: column; */

    }

    .description {
        border-bottom-left-radius: 0px;
        /* grid-auto-flow: column; */

    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | Single Price Grid Component</title>

</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Join our community</h1>
      <h2>30-day, hassle-free money back guarantee</h2>

      <p class="paragraph-1">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>

    <div class="wrapper">
      <div class="subscription">
        <h3> Monthly Subscription </h3>
        <span class='dollar'>&dollar;29</span> <span class="month"> per month</span>
        <p>Full access for less than &dollar;1 a day </p>
        <button class="btn-primary">Sign Up</button>
      </div>

      <div class="description">
        <h4>Why Us</h4>
        <ul class="desc-2">
          <li>Tutorials by industry experts</li>
          <li>Peer &amp; 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>
    </div>
  </div>



  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/">Nelson Uprety</a>.
    </p>
  </footer>
</body>
</html>

uj5u.com熱心網友回復：

空白是稱為折疊邊距的功能的結果，并且源于您<h4>Why us</h4>的margin-top.

為了防止邊距折疊，padding-top向父元素添加一個最小值.description：

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}


:root {
    --color-primary: hsl(179, 61%, 44%);
    --color-second: hsl(71, 73%, 54%);
    --color-subtext: hsl(204, 43%, 93%);
    --color-text: hsl(218, 22%, 67%);
    --color-box: hsl(179, 47%, 52%);

}

body {
    font-family: 'Karla';
    background-color: var(--color-subtext);
}

.container {
    display: flex;
    flex-direction: column;
    max-width: 350px;
    min-width: 350px;
    margin: 50px auto;
}

.container>.header {
    background-color: hsl(0, 0%, 100%);
    padding: 20px;
    line-height: 2;
    font-weight: 400;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.paragraph-1 {
    color: var(--color-text);
}

h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}


h2 {
    font-size: 1em;
    color: var(--color-second);
}

h3 {
    font-weight: 400;
}

.subscription {
    background-color: var(--color-primary);
    color: white;
    padding-top: 5px;
    padding-left: 30px;
    padding-bottom: 20px;
}

.dollar {
    font-size: 2em;
    font-weight: 400;
    padding-right: 10px;
}

.month {
    font-size: 1em;
    opacity: 0.5;
}

p {
    padding-bottom: 20px;
}

.btn-primary {
    font-size: 1em;
    font-weight: 700;
    width: 85%;
    margin-bottom: 15px;
    padding-block: min(3vh, 1em);
    background-color: var(--color-second);
    color: white;
    border: 1px solid var(--color-second);
    border-radius: 5px;
    cursor: pointer;

}


h4 {
    font-weight: 400;
    color: white;
    padding-left: 30px;
}

.description {
    background-color: var(--color-box);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding-top: 0.1px;
}

.desc-2 {
    list-style: none;
    padding-left: 30px;
}

.desc-2>li {
    color: white;
    opacity: 0.7;
    font-size: 0.9em;
    line-height: 1.5;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

@media (min-width: 768px) {
    .container {
        max-width: 50%;
        /* display: flex; */
        /* display: grid; */
        /* display: grid; */
        /* grid-auto-flow: column; */
    }

    .wrapper {
        display: grid;
        grid-auto-flow: column;
    }

    .subscription {

        border-bottom-left-radius: 12px;
        /* grid-auto-flow: column; */

    }

    .description {
        border-bottom-left-radius: 0px;
        /* grid-auto-flow: column; */

    }
}

  <div class="container">
    <div class="header">
      <h1>Join our community</h1>
      <h2>30-day, hassle-free money back guarantee</h2>

      <p class="paragraph-1">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>

    <div class="wrapper">
      <div class="subscription">
        <h3> Monthly Subscription </h3>
        <span class='dollar'>&dollar;29</span> <span class="month"> per month</span>
        <p>Full access for less than &dollar;1 a day </p>
        <button class="btn-primary">Sign Up</button>
      </div>

      <div class="description">
        <h4>Why Us</h4>
        <ul class="desc-2">
          <li>Tutorials by industry experts</li>
          <li>Peer &amp; 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>
    </div>
  </div>



  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/">Nelson Uprety</a>.
    </p>
  </footer>

uj5u.com熱心網友回復：

您可以在描述的正常屬性中使用變換（不是最小寬度部分）

.description {
  background-color: var(--color-box);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
    transform: translate(0, -22px);
}

也許這對你有用。

uj5u.com熱心網友回復：

您可以添加margin-top: 0到h4css：

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}


:root {
    --color-primary: hsl(179, 61%, 44%);
    --color-second: hsl(71, 73%, 54%);
    --color-subtext: hsl(204, 43%, 93%);
    --color-text: hsl(218, 22%, 67%);
    --color-box: hsl(179, 47%, 52%);

}

body {
    font-family: 'Karla';
    background-color: var(--color-subtext);
}

.container {
    display: flex;
    flex-direction: column;
    max-width: 350px;
    min-width: 350px;
    margin: 50px auto;
}

.container>.header {
    background-color: hsl(0, 0%, 100%);
    padding: 20px;
    line-height: 2;
    font-weight: 400;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.paragraph-1 {
    color: var(--color-text);
}

h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}


h2 {
    font-size: 1em;
    color: var(--color-second);
}

h3 {
    font-weight: 400;
}

.subscription {
    background-color: var(--color-primary);
    color: white;
    padding-top: 5px;
    padding-left: 30px;
    padding-bottom: 20px;
}

.dollar {
    font-size: 2em;
    font-weight: 400;
    padding-right: 10px;
}

.month {
    font-size: 1em;
    opacity: 0.5;
}

p {
    padding-bottom: 20px;
}

.btn-primary {
    font-size: 1em;
    font-weight: 700;
    width: 85%;
    margin-bottom: 15px;
    padding-block: min(3vh, 1em);
    background-color: var(--color-second);
    color: white;
    border: 1px solid var(--color-second);
    border-radius: 5px;
    cursor: pointer;

}


h4 {
    font-weight: 400;
    color: white;
    padding-left: 30px;
    margin-top: 0;
}

.description {
    background-color: var(--color-box);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.desc-2 {
    list-style: none;
    padding-left: 30px;
}

.desc-2>li {
    color: white;
    opacity: 0.7;
    font-size: 0.9em;
    line-height: 1.5;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

@media (min-width: 768px) {
    .container {
        max-width: 50%;
        /* display: flex; */
        /* display: grid; */
        /* display: grid; */
        /* grid-auto-flow: column; */
    }

    .wrapper {
        display: grid;
        grid-auto-flow: column;
    }

    .subscription {

        border-bottom-left-radius: 12px;
        /* grid-auto-flow: column; */

    }

    .description {
        border-bottom-left-radius: 0px;
        /* grid-auto-flow: column; */

    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | Single Price Grid Component</title>

</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Join our community</h1>
      <h2>30-day, hassle-free money back guarantee</h2>

      <p class="paragraph-1">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>

    <div class="wrapper">
      <div class="subscription">
        <h3> Monthly Subscription </h3>
        <span class='dollar'>&dollar;29</span> <span class="month"> per month</span>
        <p>Full access for less than &dollar;1 a day </p>
        <button class="btn-primary">Sign Up</button>
      </div>

      <div class="description">
        <h4>Why Us</h4>
        <ul class="desc-2">
          <li>Tutorials by industry experts</li>
          <li>Peer &amp; 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>
    </div>
  </div>



  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/">Nelson Uprety</a>.
    </p>
  </footer>
</body>
</html>

uj5u.com熱心網友回復：

務實的解決方案：您可以添加以下行：

@media (max-width: 768px) {
  .description {
    margin-top: -22px;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}


:root {
    --color-primary: hsl(179, 61%, 44%);
    --color-second: hsl(71, 73%, 54%);
    --color-subtext: hsl(204, 43%, 93%);
    --color-text: hsl(218, 22%, 67%);
    --color-box: hsl(179, 47%, 52%);

}

body {
    font-family: 'Karla';
    background-color: var(--color-subtext);
}

.container {
    display: flex;
    flex-direction: column;
    max-width: 350px;
    min-width: 350px;
    margin: 50px auto;
}

.container>.header {
    background-color: hsl(0, 0%, 100%);
    padding: 20px;
    line-height: 2;
    font-weight: 400;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.paragraph-1 {
    color: var(--color-text);
}

h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}


h2 {
    font-size: 1em;
    color: var(--color-second);
}

h3 {
    font-weight: 400;
}

.subscription {
    background-color: var(--color-primary);
    color: white;
    padding-top: 5px;
    padding-left: 30px;
    padding-bottom: 20px;
}

.dollar {
    font-size: 2em;
    font-weight: 400;
    padding-right: 10px;
}

.month {
    font-size: 1em;
    opacity: 0.5;
}

p {
    padding-bottom: 20px;
}

.btn-primary {
    font-size: 1em;
    font-weight: 700;
    width: 85%;
    margin-bottom: 15px;
    padding-block: min(3vh, 1em);
    background-color: var(--color-second);
    color: white;
    border: 1px solid var(--color-second);
    border-radius: 5px;
    cursor: pointer;

}


h4 {
    font-weight: 400;
    color: white;
    padding-left: 30px;
}

.description {
    background-color: var(--color-box);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.desc-2 {
    list-style: none;
    padding-left: 30px;
}

.desc-2>li {
    color: white;
    opacity: 0.7;
    font-size: 0.9em;
    line-height: 1.5;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

@media (min-width: 768px) {
    .container {
        max-width: 50%;
        /* display: flex; */
        /* display: grid; */
        /* display: grid; */
        /* grid-auto-flow: column; */
    }

    .wrapper {
        display: grid;
        grid-auto-flow: column;
    }

    .subscription {

        border-bottom-left-radius: 12px;
        /* grid-auto-flow: column; */

    }

    .description {
        border-bottom-left-radius: 0px;
        /* grid-auto-flow: column; */        
      
    }
}
@media (max-width: 768px) {
  .description {
    margin-top: -22px;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Frontend Mentor | Single Price Grid Component</title>

</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Join our community</h1>
      <h2>30-day, hassle-free money back guarantee</h2>

      <p class="paragraph-1">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>

    <div class="wrapper">
      <div class="subscription">
        <h3> Monthly Subscription </h3>
        <span class='dollar'>&dollar;29</span> <span class="month"> per month</span>
        <p>Full access for less than &dollar;1 a day </p>
        <button class="btn-primary">Sign Up</button>
      </div>

      <div class="description">
        <h4>Why Us</h4>
        <ul class="desc-2">
          <li>Tutorials by industry experts</li>
          <li>Peer &amp; 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>
    </div>
  </div>



  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/">Nelson Uprety</a>.
    </p>
  </footer>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422185.html

標籤：

上一篇：使用JQuery單擊子元素時更改父元素的CSS

下一篇：使容器不可見但不顯示內容