调整边距时顶部有白线答案

【问题标题】：White line on top whenever adjusting margin调整边距时顶部有白线
【发布时间】：2018-01-30 02:01:48
【问题描述】：

嘿伙计们，每当我调整边距时，顶部似乎有一条白线。我调整的边距是.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的边距

【问题讨论】：

好的，设置的时候有margin，有什么问题？
操作抱歉忘记了问题。我刚刚编辑了它。问题是我不希望侧栏在上面有空间。我希望它是 100% 宽度。

标签： html css

【解决方案1】：

试试这个：

CSS：

.sectionbox {
    padding-top: 20px;
}

【讨论】：

好吧，我仍然希望第一个盒子有空间。我不希望它粘在顶部。抱歉，我刚刚编辑了问题中的问题。我希望侧栏为 100% 宽度。虽然盒子上面还有空白。
好的，所以只需在容器中添加一个填充顶部，设置一个你想要的边距......否则，边距将推动所有块......
啊，它有效。介意解释它为什么有效吗？我不明白这里的逻辑
比如为什么margin会压低一切？
您的部分和侧边菜单处于同一级别，因此您需要边距，所以它会推动任何东西来获得边距......很难解释......但它的工作原理是这样......

【解决方案2】：

我发现经常使用 100% 使其相对于用于其他类/ID 的其他尺寸，因此无法给出正确的测量值。

您是否尝试过使用

高度：100vh；

【讨论】：

【解决方案3】：

我认为你需要做的就是在你的sectionbox中添加一个“float:left”：

.box {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 20px;
}

.sectionbox {
    margin-left: 200px;
    float: left;
}

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;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title> File Manager </title>
        <link rel="stylesheet" href="style.css"> 
    </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">
            
                <div class="box">
                    <label>Height: xxxx</label>
                    <br>
                    <label>Weight: yyyy</label>
                    <br>
                    <label>BMI: zzzz</label>
                </div>
        </div>         
    </body>
</html>

点击“运行代码sn-p”试试解决方案。

【讨论】：