嘿，每当我调整边距时，顶部似乎都有一条白线。
我调整的边距是.box，当我将其调整为10px时，将出现10px白线的长度，每当我将其调整为40px时，就会出现40px白线的长度。
问题是我不希望边栏上方也有白线。侧栏应具有100％的高度
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> File Manager </title>
<link rel="stylesheet" href="main.css">
<?php include "php/getrecord.php";?>
</head>
<body>
<div id="sidemenu">
<h2>Records</h2>
<ul>
<li><a onclick="document.getElementById('Modaladdrec').style.display='block'">Add New Record</a></li>
</ul>
</div>
<div class="sectionbox">
<?php while ($doc = $uid->fetch(PDO::FETCH_ASSOC)):?>
<div class="box">
<label>Height: <?php echo $doc["height"];?></label>
<br>
<label>Weight: <?php echo $doc["weight"];?></label>
<br>
<label>BMI: <?php echo $doc["bmi"];?></label>
</div>
<?php endwhile;?>
</div>
</body>
</html>
CSS代码：
.box {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 20px;
}
.sectionbox {
margin-left: 200px;
}
body, html {
padding: 0;
margin: 0;
top: 0;
height: 100%;
width:100%;
}
div, span, p, form, label{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
#sidemenu {
background: rgb(74, 10, 2);
list-style: none;
margin: 0;
padding: 0;
width:192px;
height: 100%;
position: fixed;
}
#sidemenu h2 {
list-style: none;
display: block;
padding-left: 52px;
color: #ccc;
font: 30px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
}
#sidemenu h3 {
margin-bottom: 10px;
margin-top: 40px;
list-style: none;
display: block;
padding-left: 52px;
color: #ccc;
font: 20px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
}
#sidemenu li {
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
list-style: none;
cursor: pointer;
}
#sidemenu a {
background: rgb(74, 10, 2);
border-bottom: 1px solid rgb(74, 10, 2);
color: #ccc;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight: normal;
}
#sidemenu a:hover {
background: rgb(111, 17, 4);
color: #fff;
padding-bottom: 8px;
}
下图显示白线导致我的.box页边空白
最佳答案
试试这个：
CSS：
.sectionbox {
padding-top: 20px;
}
关于html - 调整边距时，白线在顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48503365/