Question

我想在css中执行此操作：

每个元素之间的差距为10px textarea高度为100px，宽度为150px

这是我的一些HTML代码供参考：

main form label {
  margin: 10px;
}

textarea {
  height: 100px;
  width: 150px;
}

<main>
    <h2>Contact Us</h2>
    <form action="#" method="post">
        <label>
            First name:
            <input type="text" name="firstname">
        </label>
        <label>
            Last name:
            <input type="text" name="lastname">
        </label>
        <label>
            Email:
            <input type="text" name="email">
        </label>
        <label>
            Select Your State:
            <select>
                <option value="florida">Florida</option>
                <option value="california">California</option>
                <option value="michigan" selected="selected">Michigan</option>
                <option value="new york">New York</option>
                <option value="texas">Texas</option>
            </select>
        </label>
        <label>
            Male
            <input type="radio" name="gender" value="male">
        </label>
        <label>
            Female
            <input type="radio" name="gender" value="female">
        </label>
        <label>
            Comment:
            <textarea name="comment" id="comment"></textarea>
        </label>
        <input type='submit' value='Submit' />

    </form>

</main>

我不确定为什么它不起作用。我以前做过常规保证金。我只是不知道如何在 ALL 元素之间设置边距。

Answer 1

内联元素忽略垂直边距。使用inline-block。

main form label {
  display: inline-block;
  margin: 10px;
}

textarea {
  height: 100px;
  width: 150px;
}

<main>
    <h2>Contact Us</h2>
    <form action="#" method="post">
        <label>
            First name:
            <input type="text" name="firstname">
        </label>
        <label>
            Last name:
            <input type="text" name="lastname">
        </label>
        <label>
            Email:
            <input type="text" name="email">
        </label>
        <label>
            Select Your State:
            <select>
                <option value="florida">Florida</option>
                <option value="california">California</option>
                <option value="michigan" selected="selected">Michigan</option>
                <option value="new york">New York</option>
                <option value="texas">Texas</option>
            </select>
        </label>
        <label>
            Male
            <input type="radio" name="gender" value="male">
        </label>
        <label>
            Female
            <input type="radio" name="gender" value="female">
        </label>
        <label>
            Comment:
            <textarea name="comment" id="comment"></textarea>
        </label>
        <input type='submit' value='Submit' />

    </form>

</main>

Answer 2

尝试将标签设置为display: block;或display: inline-block;。

main form label {
  display: block;
  margin: 10px;
}

默认情况下，标签会以内嵌方式显示，因此保证金值不会像您预期的那样适用。也许这可以帮助您理解问题：http://maxdesign.com.au/articles/inline/

如何在CSS中设置每个元素之间的边距？

2 个答案: