为什么我的容器与其内容的大小不同？答案

【问题标题】：Why is my container not the same size of its content?为什么我的容器与其内容的大小不同？
【发布时间】：2021-05-26 12:08:47
【问题描述】：

如下图所示，我的容器比它的内容大。输入的宽度为 500 像素，但不知何故我的容器有 510 像素。

如果我手动将我的容器设置为 500 像素，它可以正常工作，但我不认为这是要走的路，因为我认为它应该自动具有与其内容相同的大小。

我是否遗漏了什么或者这种行为是预期的？

Container bigger than content - Image

* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

body {
    font-family: 'Open Sans', 'sans-serif';
    color: #5e665e;
    box-sizing: border-box;
    background: #F7F7F7;
}

.form {
    width: 650px;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin: 0 auto;
    padding: 76px 70px;
    margin-top: 50px;
}

.form__title {
    text-align: center;
    color: #339133;
    font-family: 'Lato', serif;
    font-size: 48px;
}

.form__container {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form__item:not(:last-of-type) {
    margin-bottom: 36px;
}

.form__item:is(:last-of-type) {
    margin-bottom: 46px;
}

.form__label {
    margin-bottom: 8px;
    font-weight: bold;
}

.form__input {
    height: 42px;
    width: 500px;
    padding: 15px;
    border-radius: 5px;
    border: none;
    background: #F0F5F0;
    color: #5e665e;
}

.form__input::placeholder {
    color: #989e98;
}

.form__input:focus:invalid {
    border-radius: 5px 5px 0 0;
    box-shadow: 0 2px #cc3131;
}

.form__input:valid {
    border-radius: 5px 5px 0 0;
    box-shadow: 0 2px #39b031;
}

.form__input:focus {
    outline: none;
}

.form__button {
    width: 500px;
    height: 50px;
    border-radius: 10px;
    background: #339133;
    color: #F7FAF5;
    border: none;
}

.form__button:hover {
    cursor: pointer;
    background: #32AD32;
}

<form action="#" class="form">
    <h1 class="form__title">Create your account</h2>

        <div class="form__container">
            <div class="form__item">
                <label for="username" class="form__label">User</label>
                <input type="text" class="form__input" id="username" placeholder="John Smith" minlength="4" maxlength="70"
                       required>
            </div>

            <div class="form__item">
                <label for="email" class="form__label">Email</label>
                <input type="email" class="form__input" id="email" placeholder="john@example.com" minlength="8"
                       maxlength="320" required>
            </div>

            <div class="form__item">
                <label for="password" class="form__label">Password</label>
                <input type="password" class="form__input" id="password" placeholder="********" minlength="8" maxlength="32"
                       required>
            </div>

            <div class="form__item">
                <label for="confirm-password" class="form__label">Confirm Password</label>
                <input type="password" class="form__input" id="confirm-password" placeholder="********" minlength="8"
                       maxlength="32" required>
            </div>
            <button class="form__button" type="submit">Submit</button>
        </div>
</form>

【问题讨论】：

标签： css containers width

【解决方案1】：

您的 .form 选择器的总宽度（边框 + 填充 + 内容）为 650 像素减去 padding-left 的 70 像素减去 padding-right 的 70 像素，内容宽度为 510 像素。

.form {
    width: 650px;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin: 0 auto;
    padding: 76px 70px;
    margin-top: 50px;
}

如果您使用padding: 76px 75px;，它应该可以工作。

【讨论】：