如何删除似乎是最高保证金?

时间:2015-12-22 23:08:45

标签: css html5 css3 margin

在构建我的侧边栏时,我注意到我的页面内容似乎有一个上边距(当我检查页面时是52px的身体),但我不知道为什么?我要让我的侧边栏弹出,但我希望我的'.page-content'是全高的。 http://codepen.io/anon/pen/XXKEpE

CSS:

.page-content{
    position:relative;
    z-index:1;
    background-color:black;
}

.toggle{
    text-decoration:none;
    font-size:30px;
    color:black;
    position:fixed;
    top:20px;
    z-index:2;
    left:200px;
    transition: .3s ease;
}

.sidebar{
    position:fixed;
    top:0px;
    bottom:0px;
    left: 0px;
    width:120px;
    padding:30px;
    background:#333;
    z-index:0;
}

li{
    color: rgba(255,255,255,0.8);
    font-family: sans-serif;
    font-size:16px;
    margin-bottom:16px;
    -webkit-font-smoothing: atialiased;
    cursor: pointer;
}

li:hover{
    color: rgba(255,255,255,1);
}

#sidebartoggler{
    display:none;}

#sidebartoggler:checked + .page-wrap .toggle{
    left: 15px;
}

#sidebartoggler:checked + .page-wrap .page-content{
    padding-left: 180px;
}

HTML:

<input type="checkbox" id="sidebartoggler" name="" value="" />

<div class="page-wrap">

    <label for="sidebartoggler" class="toggle">☰</label>

    <div class="page-content">...</div>

    <div class="sidebar">
        <ul>
            <li>Home</li>
            <li>Projects</li>
            <li>Clients</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul>
    </div>

</div>

1 个答案:

答案 0 :(得分:0)

插入此内容:

body {
  margin: 0;
  padding: 0;
}

(这总是一个好主意......)