上部と下部のパッド記号を正しく削除する方法

Question

セクション.searchに上部、左、右、下の詰め物がある理由とその除去方法を理解していますか？トップとボトムのパディングは、ブートストラップのデフォルトのために行うべきですが、上下のパディングは必要ですか？

この

が動作しているようです：

* { マージン：0重要。埋め込み：0！重要

しかし、それはどうするのですか？

例はここにある：これらの余白は、ブラウザのデフォルトCSSから来 https://jsfiddle.net/wqg4csL0/

Htmlの

<section class="search"> 
    <div class="container"> 
    <h1>Title</h1> 

    <form action="/signup" method="post"> 
     <div class=""> 
     <p class="col-xs-10"> 
      <input type="text" name="first_name"> 
     </p> 
     <p class="col-xs-2"> 
      <input type="button" value="Search "></input> 
     </p> 
    </div> 
    </form> 
</div> 

</section> 

CSS

.search{ 
    background-color: green; 

} 

h1{ 
    color: white; 
    text-align: center; 
    font-size: 0.85em; 
    } 

body { 
    margin: 0; 
    padding:0; 
} 

*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

[class*="col-"]{ 
    padding: 0 !important; 
} 

input,textarea,select{ 
    display: block; 
    padding: 15px; 
    width: 100%; 
    outline: 0; 
    border: 0; 
} 

Answer 1

。 reset CSSを使用することは、実際には一般的であり、完全に有効な解決策です。