divタグによって改行が発生する

divを使用して要素を作成する場合は、コンテンツと境界線の間にスペースを作成します。（青い線）。 spanを使用すると、要素が壊れて、境界線の外にコンテンツが表示されます。
http://i66.tinypic.com/23k4xsp.png

これは私のCSSコードです：
divタグによって改行が発生する

#main1 { 
margin-left: 40%; 
background-color: lightgrey; 
width: 20%; 
border: 5px; 
padding: 5px; 
border-style: solid; 
border-color: grey; 
border-width: 2px; 
text-align: left; 
} 
body { 
text-align: center; 
background-color: yellow; 
font-family: "Arial"; 
}

そして、私のHTML：

<!DOCTYPE html> 

<html> 
    <head> 
     <title>BMI</title> 
     <link rel="stylesheet" type="text/css" href="main.css"> 
    </head> 

    <body> 
    <div id="main1"> 
     <h3>BMI calculator</h3> 
     <form action="results.php" method=""post""> 
      <input type="radio" name="gender" value="man">Man<br> 
      <input type="radio" name="gender" value="vrouw">Vrouw<br><br> 
      Lengte:<br> 
      <input type="text" name="lengte"><br> 
      Gewicht:<br> 
      <input type="text" name="gewicht"><br><hr> 
      <button action="submit">Submit</button> 
     </form> 
    </div> 
    </body> 
</html>

は、任意の回避策はありますか？私はかなりwebdesignに新しい、私はwebz上で何かを見つけることができませんでした...ありがとう

出典

2016-05-11 Poeder Ruiker

それは 'ディスプレイと呼ばれています。しかし、インラインで何かを表示したいときは、 'div'を使うべきではありません。それには 'span'が使われます。 –

私が言及したように、それは動作しません。それはちょうどそれを悪化させ、境界線を2つのかっことして画面の中央に浮かべ、内容は左のどこかに投げ捨てられます。 –