html - 将上边距添加到 div 中的文本区域

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 中制作了一个水平居中的文本区域，但我似乎无法操纵垂直位置。添加 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>