【问题标题】：Can't move text with margin无法移动有边距的文本
【发布时间】：2014-04-28 22:37:11
【问题描述】：

我在尝试编写我的第一个模板时遇到了问题。我正在尝试使用边距功能移动我的链接（主页/“）但它没有移动。但是我可以使用边距移动其他文本。那么为什么我不能使用边距功能移动一些文本呢？

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>

【问题讨论】：

标签： html css position margin padding

【解决方案1】：

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

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

jsFiddle example

【讨论】：

请注意，ie6/7 不喜欢display:inline-block;，我使用zoom: 1; 和*display: inline;

【解决方案2】：

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

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

这是一个DEMO

【讨论】：

【解决方案3】：

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

根据CSS2.1 规范：

8.3 边距属性：'margin-top'、'margin-right'、'margin-bottom'、'margin-left'和'margin'

Margin 属性指定框的边缘区域的宽度。 'margin' 速记属性设置所有四个边的边距，而其他边距属性只设置它们各自的边。这些属性适用于所有元素，但垂直边距不会对不可替换的内联元素产生任何影响。

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

【讨论】：

因为HOME 是一个inline 元素。

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