因为`HOME`是`inline`元素。

Question

我试图编写我的第一个模板，但遇到了问题。我尝试使用保证金功能移动我的链接（主页/＆＃34;），但它不会移动。但其他文本我可以保证金。那么为什么我不能移动一些具有保证金功能的文本？

body {
    margin:0;
    padding:0;
}

#header {
    background-color:#353C3E;
    height:80px;
    width:100%;
    position:relative;
}

.header_content {
    width:946px;
    position:relative;
    margin:0 auto;
    padding:0;
}

.header_content p:nth-child(2) {
    margin:-63px 0 0 100px;
    position:relative;
    font-size:24px;
    color:#FFF;
    font-family:Montserrat;
}

.header_content p:nth-child(3) {
    margin:-21px 0 0 564px;
    position:relative;
    font-size:13px;
    color:#959595;
    font-family:Montserrat;
}

#header2 {
    width:100%;
    background-color:#40494C;
    height:62px;
}

.header_content a {
    font-family:Montserrat;
    color:#717B7E;
    font-size:13px;
    margin-top:10px;
    text-decoration:none;
}

.header_content a:hover {
    color:#FFF;
    font-size:13px;
    text-decoration:none;
}

@font-face {
    font-family:Montserrat;
    src: url('Montserrat-Regular.ttf');
}

<!DOCTYPE html>
<html>
    <head>
        <title>Webpage</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
        <div id="header">
            <div class="header_content">
                <img src="img/near-logo.png"/>
                <p>ILLUSTRATE.</p>
                <p><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
            </div>
        </div>
        <div id="header2">
            <div class="header_content">
                <div class="link">
                    <a href="">HOME/</a>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

内联元素没有高度，因此您可以将显示从内联更改为内联块以允许高度，或者在您的情况下为上边距，以便工作：

.header_content a {
    font-family:Montserrat;
    color:#717B7E;
    font-size:13px;
    margin-top:10px;
    text-decoration:none;
    display:inline-block;
}

<强> jsFiddle example

Answer 2

首先，如果它是您正在使用的菜单，我会使用UL而不是DIV。所以我重新组织了一下，看看你是否喜欢它

ul.header_content {
   display:block;
   padding-top:15px;
   padding-left:15px;
}
ul.header_content li {
   display:inline;
   margin:0px 10px;
}

这是 DEMO

Answer 3

因为`HOME`是`inline`元素。

根据CSS2.1规范：

8.3保证金属性：＆＃39; margin-top＆＃39;，＆＃39; margin-right＆＃39;，＆＃39; margin-bottom＆＃39;，＆＃39; margin-left＆＃39;和＆＃39; margin＆＃39;

边距属性指定框的边距区域的宽度。保证金＆＃39;简写属性设置所有四边的边距，而其他边距属性仅设置其各自的边。这些属性适用于所有元素，但垂直边距不会对未替换的内联元素产生任何影响。

如果您希望应用顶部（和底部）边距，请将其更改为inline-block，或使用设置了position:relative的{{1}}。

无法使用保证金移动文字

3 个答案:

因为`HOME`是`inline`元素。

无法使用保证金移动文字

3 个答案:

因为HOME是inline元素。

因为`HOME`是`inline`元素。