当宽度为 100% 时，为什么这个 div 会溢出？

Question

我创建了这个简单的 div，它有一个 form。由于某种原因，即使我指定了 100% 的宽度，它的宽度也大于屏幕的 100%。

我检查过额外保证金 – 我知道我做错了什么！

有什么想法吗？

/* NEWSLETTER SECTION */
.newsletter-wrap {
  background-color: black;
  color: white;
  padding: 2rem 0.5rem 0.5rem 0.5rem;
  width: 100%;
  text-align: center;
}

.newsletter-wrap h4,
.newsletter-wrap label {
  font-weight: bolder;
  padding-bottom: 1rem;
  font-size: 1.3rem;
}

.newsletter-form input {
  padding: 0.5rem;
}

#submit-btn-newsletter {
  text-align: center;
}

#submit-btn-newsletter input {
  background-color: #d02121;
  color: white;
}

<div class="newsletter-wrap">
  <div class="newsletter-headline">
    <h4><b> JOIN OUR NEWSLETTER </b></h4>
  </div>
  <div class="newsletter-form">
    <form>
      <fieldset>
        <label> NAME: </label>
        <input type="text">
      </fieldset>
      <fieldset>
        <label>EMAIL: </label>
        <input type="text">
      </fieldset>
      <fieldset id="submit-btn-newsletter">
        <input type="submit" value="Subscribe">
      </fieldset>
    </form>
  </div>
</div>

Answer 1

padding 造成了这个问题。

.newsletter-wrap {
    padding: 2rem 0.5rem 0.5rem 0.5rem; 
                    ^--------------^----------------------here
    //more code...
 }

将box-sizing:border-box;插入.newsletter-wrap

.newsletter-wrap {
  box-sizing: border-box;
  //more code....
}

或插入此代码：

* {
  box-sizing: border-box;
}

 .newsletter-wrap {
  box-sizing: border-box;
 }
.newsletter-wrap {
    background-color: black;
    color: white;
    padding: 2rem 0.5rem 0.5rem 0.5rem;
    width: 100%;
    text-align: center;

 }
 .newsletter-wrap h4, .newsletter-wrap label {
        font-weight: bolder;
        padding-bottom:  1rem;
    font-size: 1.3rem;
 }

.newsletter-form input {
    padding: 0.5rem;

}
#submit-btn-newsletter  {

    text-align: center;
    }
#submit-btn-newsletter input {
    background-color: #d02121;
    color: white;

}

<div class="newsletter-wrap">
    <div class="newsletter-headline">
        <h4><b> JOIN OUR NEWSLETTER </b></h4>
    </div>
    <div class="newsletter-form">
        <form>
            <fieldset>
                <label> NAME: </label>
                <input type="text">
            </fieldset>
            <fieldset>
                <label>EMAIL: </label>
                <input type="text">                     
            </fieldset>
            <fieldset id="submit-btn-newsletter">
                <input type="submit" value="Subscribe">                     
            </fieldset>                 
        </form>
    </div>

</div>

阅读更多：

如果你不使用 box-sizing: border-box; total width = padding + width + border ，但是当使用 box-sizing: border-box; width 属性（和 min/max 属性）包括 content, padding和边框，但不是边距。

Answer 2

您可以在 newsletter-wrap 中将宽度更改为最大宽度 class

Answer 3

在.newsletter-wrap

中使用box-sizing:border-box;

/* NEWSLETTER SECTION */
.newsletter-wrap {
    background-color: black;
    color: white;
    padding: 2rem 0.5rem 0.5rem 0.5rem;
    width: 100%;
    text-align: center;
 box-sizing:border-box;

 }
 .newsletter-wrap h4, .newsletter-wrap label {
        font-weight: bolder;
        padding-bottom:  1rem;
    font-size: 1.3rem;
 }

.newsletter-form input {
    padding: 0.5rem;

}
#submit-btn-newsletter  {

    text-align: center;
    }
#submit-btn-newsletter input {
    background-color: #d02121;
    color: white;

}

<div class="newsletter-wrap">
    <div class="newsletter-headline">
        <h4><b> JOIN OUR NEWSLETTER </b></h4>
    </div>
    <div class="newsletter-form">
        <form>
            <fieldset>
                <label> NAME: </label>
                <input type="text">
            </fieldset>
            <fieldset>
                <label>EMAIL: </label>
                <input type="text">                     
            </fieldset>
            <fieldset id="submit-btn-newsletter">
                <input type="submit" value="Subscribe">                     
            </fieldset>                 
        </form>
    </div>

</div>

当宽度为 100% 时，为什么这个 div 会溢出？

Why does this div overflow when width is 100%?

html

css

overflow