Question

我有一个非常简单的问题。输入元素类型不受预期的边距影响。我猜想输入具有某种默认样式，这会使它表现出异常。

预期结果是，当我应用5个像素的边距时，输入字段将完全包围5个像素的缓冲区。相反，发生的是它在顶部，左侧和底部都有一个5像素的缓冲区，但没有右侧。

* {
  margin: 0px;
}

input {
  display: inline-block;
  background-color: green;
  border: none;
}

div {
  background-color: yellow;
}

.width-100 {
  width: 100%;
  background-color: blue;
}

.width-50 {
  display: inline-block;
  width: 50%;
  background-color: red;
}

.margin-10px {
  margin: 10px;
}

.padding-10px {
  padding: 10px;
}

<div class="width-100">
  <div class="width-50">
    <input class="margin-10px" value="This input should be filling in all the way to the right"></input>
  </div>
  <!--
       -->
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
  <!--
      -->
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
  <!--
      -->
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
</div>

这是指向我的JSFiddle

的链接

Answer 1

您需要使用边框和 calc ，因为宽度不包括app和.listen，

padding：width和height属性包括填充和边框，但不包括空白...请注意，填充和边框将在框内。并且需要包含边距，您需要使用margin

从border-box中减去它

width:100%

width:calc(100% - 20px);

Answer 2

您的input的宽度不是100％，而是从浏览器获取默认值。

尝试：

input {
 width: 100%;
 ...
}

或者您可以使用自己的类：

* {
  margin: 0px;
  box-sizing: border-box;
}

input {
  width: 100%;
  display: block;
  background-color: green;
  border: none;
}

div {
  background-color: yellow;
}

.width-100 {
  width: 100%;
  background-color: blue;
}

.width-50 {
  display: inline-block;
  width: 50%;
  background-color: red;
}

.margin-10px {
  margin: 10px;
}

.padding-10px {
  padding: 10px;
}

<div class="width-100">
  <div class="width-50 padding-10px">
    <input class="padding-10px" value="This input should be filling in all the way to the right"></input>
  </div><div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div><div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div><div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
</div>

Answer 3

您必须设置输入字段的width和height。试试这个：

* {
  margin: 0px;
}
input {
  display: block;
  background-color: green;
  border: none;
}
div {
  background-color: yellow;
}
.width-100 {
  width: 100%;
  background-color: blue;
}
.width-50 {
  display: inline-block;
  width: 50%;
  background-color: red;
}
.margin-10px {
  margin: 10px;
}
.padding-10px {
  padding: 10px;
}

/* added CSS */
input {
  width: 90%;
  height: 18px;
}

<div class="width-100">
  <div class="width-50">
    <input class="margin-10px padding-10px" value="This input should be filling in all the way to the right">
  </div>
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
  <div class="width-50">
    <div class="margin-10px padding-10px">This div is filling in the space as expected.</div>
  </div>
</div>

输入字段宽度不受边距影响

3 个答案: