如何在100％宽度的文本区域保留边距？

Question

考虑下面的CSS

.comment { 
    margin: 10px; 
    display: block; 
    overflow: auto; 
    border-top-left-radius: 5px 5px; 
    border-top-right-radius: 5px 5px; 
    border-bottom-right-radius: 5px 5px; 
    border-bottom-left-radius: 5px 5px; 
    -webkit-box-shadow: rgba(0, 0, 0, .2) 1px 1px 3px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    min-height: 200px; 
    width: 100% 
} 

这适用于textarea，但右页边距被忽略，textarea熄灭屏幕。

这是为什么？

Answer 1

通过设置宽度为100％和10px的保证金textarea的将是一个100％的宽度，它的容器向下移动到左边10px的

为了得到你可能需要使用你想要的结果textarea周围的一个容器，带有10px的填充。

参见example。

• commentA使用容器填充
• commentB是你原来的CSS

所以像：

<div class="comment-container"> 
    <textarea class="commentA"></textarea> 
</div> 

和

.comment-container { 
    padding:10px; 
} 
.commentA { 
    width:100%; 
    min-height: 200px; 
} 

上手。