css - 带边距的页面 CSS 宽度

Question

可能重复：
左右边距为 100%

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

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

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

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%;
    }