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>

有什麼解決方法嗎？我相當新的網頁設計，我無法找到webz上的任何東西...謝謝

來源

2016-05-11 Poeder Ruiker

這就是所謂的'顯示：inline'。但是當你想要顯示某些內聯時，你不應該使用'div'。 'span'用於這個。 –

正如我所說，它不起作用。這隻會讓情況變得更糟，因爲邊界只是浮動在屏幕中間作爲2個括號，而內容卻傾倒在左邊的某處。 –