html - div标签导致换行

当我想用 div 制作一个元素时，它会在内容和边框之间创建一个空间。 (蓝线)。使用 span 会导致元素中断，显示边界外的内容。
http://i66.tinypic.com/23k4xsp.png

这是我的 CSS 代码:

#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 上找不到任何东西...谢谢

最佳答案

空格(蓝色线)出现是因为 <h3>标签有默认值 margin .如果将其设置为 margin: 0空间将消失。