Question

我遇到了麻烦。带标题：我无处可获得8px的保证金！我希望我的标题附加到覆盖所有顶部区域而没有边距。但我只能用margin :-8px;得到这个东西但是对于不同的屏幕，我需要设置其他边距。问题是：如果我没有设置正确的保证金： 1）滚动条出现在底部; 要么 2）标题被背景包围，没有附着在周围区域。

CSS：

    header{

        padding: 20px;
        height: 70px;
        margin: -2%;
        z-index: 1;

        box-shadow: -1px 5px 5px #555;
        background-size : cover;
        background: #FFFFFF;
        position: relative;
    }
    H1.name {
        position: absolute;
        margin: 20px 0 0 15px;
        font-size: 34px;
        font-weight: 400;
        font-family: 'Roboto', sans-serif;
        color: #807e7e;    
        display: inline;
    }
    .navigation {
        margin-top: 2.5%;
        vertical-align: middle;
    }
    ul.navigation{
        width: 30%;
        float: right;
        list-style-type: none;
        display: inline-block;
    }
    ul.navigation > li{
        margin: 0 25px 0 0;
        position:relative;
        display: inline;
    }
    a.navitem{
        color:#6a6a6a; 
        font-family: 'Roboto', sans-serif;
        text-decoration: none;

        -webkit-transition: color 1s;
        -moz-transition: color 1s;
        transition: color 1s;
    }

    a.navitem:hover {
        color: #292828;  
    }
    @keyframes nicehover{
        50%{
            color:#6a6a6a; 
        }
    }
    @-webkit-keyframes nicehover{
        50%{
            color:#141313; 
        }

}
@-moz-keyframes nicehover{
    50%{
        color:#6a6a6a; 
    }
}

HTML：

<header >
    <H1 class="name">Slava Korzun</H1>  
        <ul class="navigation">
            <li><a class="navitem" href="index.html">ABOUT-ME</a></li>
            <li><a class="navitem" href="projects.html">PROJECTS</a></li>
            <li><a class="navitem" href="contacts.html">CONTACTS</a></li>
        </ul>
</header>

Answer 1

    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

通常最好在每个css中使用此代码或在google上搜索reset.css文件并下载并使用它

标题{margin：trouble;}

1 个答案: