HTML DIV填充错误

Question

为什么我的div没有填充正确？

    <div class="padding_10">
      <input placeholder="Search for people..." style="width: 100%;">
    </div>
    .padding_10 { padding: 10px; }

Answer 1

首先，以确保您的css位于style tag内

<style>
.padding_10{ padding: 10px; }
</style>

第二次如果您在style tag内，那么只需right click（使用firebug）标记并检查该div的所有styles。可能是其他一些样式，padding无法正常工作

Answer 2

输入边框默认已添加

您在输入中应用宽度100％

在calc函数中应用宽度

<div class="padding_10">
      <input placeholder="Search for people..." style="width:calc(100% - 2px); border:1px solid #000;">
    </div>