时间戳

首页 > 解决方案 > 为什么我的容器与其内容的大小不同？

css - 为什么我的容器与其内容的大小不同？

问题描述

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

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

我错过了什么还是这种行为是预期的？

容器大于内容 - 图片

* {
    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>

标签： csscontainerswidth

解决方案

您的.form选择器的总宽度（边框 + 内边距 + 内容）为650 像素减去 70padding-left像素减去padding-right70 像素，内容宽度为 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;，它应该工作。

推荐阅读