為什么表單元素占據寬度的100％？

Question

我有一個表單元素，我想占用與其子元素相同的寬度，沒有邊距，但無論我做什么，瀏覽器使其寬度+邊距占據寬度的100％。

這是html：

<div class="container">

  <form method="GET" action="http://localhost/search" accept-charset="UTF-8">
    <div class="search centered">
      <div class="input-container">
        <input type="text" name="query" class="searchbar" placeholder="What do you want to search?" />
        <button type="submit" class="search-button">Search</button>
      </div>
    </div>

  </form>

</div>

和css：

    @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.search * {
  height: 35px;

}

.searchbar {
  width: 450px;
}
.brandname {
  position: relative;
  font-size: 500%;
  font-family: 'Lato', sans-serif;
  color: #1f0e3e;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 5%;
}
body {
    margin: 10px;
}

.input-container{
    float: left;
    display: block;
    outline-style: solid;
    outline-color: #e3e3e3;
    outline-width: 1px;
  }

  .searchbar{
    margin-left: 5px;
  }

  .search button {
    background-color: rgba(152,111,165,0.38);
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    /*overflow: hidden;*/
    outline-width: 1px;
    outline-style: solid;
    outline-color: #e3e3e3;
    color: white;
}

.search input{
  outline-width: 0px;
}

form{
  height: 30px;
  width: 100px;
  margin-left: 0px;
}

這里有一個小提琴，你可以看到，即使你強制表格有一個小寬度，瀏覽器強制左邊距占據空間的其余部分。

我怎樣才能擺脫這個邊緣並使表格自動占用其子女的空間？

Answer 1

將顯示表添加到form元素將使其自動調整為其子元素。

form {
     display:table;
    }

這是一個工作小提琴： https ： //jsfiddle.net/bnah6jLe/

為什么表單默認為100％寬度

默認情況下，大多數瀏覽器的表單都將其顯示類型設置為block 。 在block上下文的規范中，它定義如下。

在塊格式化上下文中，每個框的左外邊緣觸摸包含塊的左邊緣（從右到左格式化，右邊緣觸摸）

參考： https ： //www.w3.org/TR/CSS21/visuren.html#block-formatting

簡短display:block除非另有說明，否則display:block寬度為100％。

邊注

問題：為什么table用於此示例而不是inline-block 。

答：我使用table而不是inline-block因為顯示上下文（如block和table用作包含元素而不進行分組。 像inline-block和inline-table這樣的顯示上下文用於要組合在一起的子元素。 這是一個小差異，但我認為考慮形式通常意味着容器表更合適。