带边距的CSS页面宽度

Question

  

可能重复：
  margin left and right on with 100%

我有一个文本框，我想填充页面的宽度，但我需要它有一个相当大的边距左边给出缩进的外观。所以，如果我有这样的风格：

.notesText {
        margin-left: 20px;
        width: 100%;
    }

我最终将页面向右延伸了20px，以容纳我的文本框而不是填充页面现有宽度的文本框。由于页面宽度因设备而异，如何将其格式化为左边距为20px，然后填充页面的剩余空间？

Answer 1

尝试margin-left: 5%; width: 95%;

这会给你一个可变余量，可能是你想要的也可能不是

Answer 2

由于没有box-sizing: margin-box我认为您需要做的是在textarea的外包装上设置边距：

<label class="message">
    Message<br>
    <textarea ...></textarea>
</label>

label.message {
    display: block;
    padding: 0 20px;
}

    label.message textarea {
        box-sizing: border-box;
        width: 100%;
    }