Question

当我想用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>

有没有解决方法？我对网页设计比较陌生，我在网上找不到任何东西......谢谢

Answer 1

空格（蓝色系列）的出现是因为<h3>标记的默认值为margin。如果将其设置为margin: 0，则该空间将消失。

h3{
  margin: 0;
}

另外，我无法重现您的换行符：JSFiddle。

Answer 2

这实际上是由h3标记引起的。默认情况下，标头标签在元素的上方和下方都有一个边距。

尝试添加到您的CSS： h3 { margin-top: 0; }

div标签导致换行

2 个答案: