Question

http://jsfiddle.net/3j24hrgf/1/

<div class="note">
    <textarea rows="4"  placeholder="Your note's text here"></textarea>

</div>

.note {
    background-color: green;
    width: 500px;
    height: 500px;
}
textarea {
    width: 80%;
    display: block;

    margin-left: auto;
    margin-right: auto;
    resize: none;
    background-color: transparent;
    border: dashed 2px;
    padding: 5px;
    font-family: 'Rancho', Helvetica, sans-serif;
    font-size: 30px;
}

我在div中制作了一个水平居中的textarea，但我似乎无法操纵垂直位置。添加margin-top将推动整个div而不是textarea本身。

Answer 1

这是因为margin collapsing，您可以将display: inline-block;添加到.note来修复它。

.note {
    background-color: green;
    width: 500px;
    height: 500px;
    display: inline-block;
}
textarea {
    margin-top: 50px;
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    resize: none;
    background-color: transparent;
    border: dashed 2px;
    padding: 5px;
    font-family:'Rancho', Helvetica, sans-serif;
    font-size: 30px;
}

<div class="note">
    <textarea rows="4" placeholder="Your note's text here"></textarea>
</div>

Answer 2

为什么不向div.note

添加填充

http://jsfiddle.net/z6201kr0/

.note {
    background-color: green;
    width: 500px;
    height: 500px;
    padding-top: 20px;
    box-sizing: border-box;
}
textarea {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    resize: none;
    background-color: transparent;
    border: dashed 2px;
    padding: 5px;
    font-family: 'Rancho', Helvetica, sans-serif;
    font-size: 30px;
}

Answer 3

你可以用两种方法解决这个问题..请检查以下代码

display: inline-block; /* to .note div */
margin-top:100px; /* to input textarea */

或

padding-top:100px; /* to .note div */
height:400px; /* to .note div */

感谢。

在div中为textarea添加上边距

3 个答案: