HTML/CSS定位和间距

我对编码还不熟悉，使用这个资源已经有一段时间了，但这是我的第一个问题

以下是有关网页的链接：

我已经包括了明亮的背景，只是为了便于看到不同元素的开始和结束

我想知道如何消除元素之间的空白（边距和填充设置为0），以及如何获取蓝色部分的内容，并将其放在绿色部分，而不影响我名字的中心位置。换言之，我希望我的名字保持原样——在中间——然后在窗口最右边的垂直菜单上显示“Email”和“LinkedIn”

这是我的html：

<div id="header">
    <div id="contact_menu">
        <ul>
            <li><a href="mailto:andrew@andrewkennedy.ie" target="_top">Email</a>
            </li>
            <li><a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a>
            </li>
        </ul>
    </div>
    <div id="title">
         <h1><span>A</span>ndrew <span>K</span>ennedy</h1>

    </div>
    <div id="nav">
        <ul>
            <li><a href="http://www.andrewkennedy.ie/" target="_blank">Home</a>
            </li>
            <li><a href="http://www.google.ie/" target="_blank">Google</a>
            </li>
            <li><a href="http://www.yahoo.com/" target="_blank">Yahoo</a>
            </li>
            <li><a href="http://www.bing.com/" target="_blank">Bing</a>
            </li>
        </ul>
    </div>
</div>  

任何帮助都将不胜感激。谢谢你抽出时间

---

Andrew

您将元素放置在h1标记中。h1有一个由浏览器施加的自然余量。无论如何，您不应该在h1标记中包装元素。将其更改为无边距的div，空格将消失

包装联系人信息的ul可以放在“Andrew Kennedy”的父包装中（从h1更改后）。将“位置：绝对”添加到ul，您可以使用“left”属性对其进行定位

这里是对title div的修改。内联css自然应该放在样式表中，这只是为了演示

<div id="title">
    <div style="font-size: 50px;"><span>A</span>ndrew <span>K</span>ennedy</div>
    <ul style="position:absolute;font-size: 12px;right: 10px;margin-top: -40px;text-align: left;">
        <li><a href="mailto:andrew@andrewkennedy.ie" target="_top">Email</a></li>
        <li><a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a></li>
    </ul>
</div>

安德鲁·肯尼迪

正如另一位用户所说，您已将自己的名字放在h1标记中。这些标签里面已经有了边距，它们将被用在有很多空间的页面上，并且可以用于像文章标题这样的事情。对于您的情况，您可以删除h1标记，然后用段落标记替换它们（根据需要设置样式），也可以更改h1的边距。在CSS中，您可以更改h1标记上的边距，以自定义站点的外观

这看起来像这样

.h1 {
margin-top:0px;
margin-bottom:0px;
}

---

你的代码肯定需要改进。下面是我的优化和评论：

代码中仍然存在冗余，我会让您解决这些问题

更新的HTML：

<div id="header">
    <ul id = "contact_menu">
        <li>
            <a href="mailto:andrew@andrewkennedy.ie" target="_top">Email</a>
        </li>
        <li>
            <a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a>
        </li>
    </ul>
    <h1 id = "title"><span>Andrew</span> <span>Kennedy</span></h1>
    <ul id = "nav">
        <li>
            <a href="http://www.andrewkennedy.ie/" target="_blank">Home</a>
        </li>
        <li>
            <a href="http://www.google.ie/" target="_blank">Google</a>
        </li>
        <li>
            <a href="http://www.yahoo.com/" target="_blank">Yahoo</a>
        </li>
        <li>
            <a href="http://www.bing.com/" target="_blank">Bing</a>
        </li>
    </ul>
</div>
<div id="main">
    <img src="http://placehold.it/500x300" />
</div>
<div id="footer"></div>

---

非常感谢你的建议——你显然是特意帮忙的。我已经了解了很多关于通用编码风格的知识，并且可以跟随您所做的具体更改。我能问一下，把字体写成20px/1.5的目的是什么吗？我理解20px，但/1.5的含义是什么？不客气。正斜杠后的无单位数将行高设置为字体大小的1.5倍。这是设置元素高度的方法之一。您也可以使用单位（即20px/30px），但如果尺寸保持不变，则无单位数是一个好方法。如果代码经常需要更改，那么您所需要做的就是更改字体大小，并根据比例调整行高。干杯

<div id="header">
    <ul id = "contact_menu">
        <li>
            <a href="mailto:andrew@andrewkennedy.ie" target="_top">Email</a>
        </li>
        <li>
            <a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a>
        </li>
    </ul>
    <h1 id = "title"><span>Andrew</span> <span>Kennedy</span></h1>
    <ul id = "nav">
        <li>
            <a href="http://www.andrewkennedy.ie/" target="_blank">Home</a>
        </li>
        <li>
            <a href="http://www.google.ie/" target="_blank">Google</a>
        </li>
        <li>
            <a href="http://www.yahoo.com/" target="_blank">Yahoo</a>
        </li>
        <li>
            <a href="http://www.bing.com/" target="_blank">Bing</a>
        </li>
    </ul>
</div>
<div id="main">
    <img src="http://placehold.it/500x300" />
</div>
<div id="footer"></div>

/* It is a good practice to use one of the reset css files.  
For more info see http://www.cssreset.com/ */

* {
    margin: 0;
    padding: 0;
}

/* Color code #fff is a valid abbreviation of #ffffff */

body {
    background-color: #fff;
}

/* There is really no need to wrap h1 tag in a div tag.  The h1, 
by default is a block element and you can just assign an id to it and 
access it directly. */

#title {
    background-color: #0f0;
    color: #000;
    /* font-weight, font-size, line-height, and font-family were 
    combined into font declaration */
    font: bold 45px/1.5 'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-align: center;
    letter-spacing: 5px;

    /* width of 100% is not necessary, because h1 is a block and 
    spans the entire width of its parent by default.  The margin 
    and padding of 0 were deleted also, because these are specified 
    in a mini-reset up top. */
}

/* Your first and last names were surrounded by span elements.  
To invoke ::first-letter pseudo-element on these, the spans are displayed 
as inline-block */

#title > span {
    display: inline-block;
}

#title > span::first-letter {
    color: #900;
}

/* Same as with h1, there is no need to wrap an unordered list in a div.  
The ul, by default, is also displayed as a block */

#contact_menu {
    background-color: #00f;
    list-style-type: none;
    text-align: right;
}

/* the list items are displayed as inline-blocks, which makes them stack 
horizontally while still allowing us to change their dimensions.  Unlike 
floats, inline-blocks will not break the structure and do not require 
clearing */

#contact_menu > li {
    display: inline-block;
}

#contact_menu > li > a {
    /* Anchors (a), by default, are inlines.  Changing their display 
    to block allows changing their dimensions. Instead of setting width 
    explicitly, the line-height and padding are used.  Anchors do not 
    take a line to themselves, because they are wrapped in inline-block 
    list items */    
    display: block;
    font: normal 30px/1.5 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-decoration: none;
    padding: 0 5px;

    /* text-align was deleted because it was specified on the level of 
    the ul and because li are inline-blocks, they wrap around the content 
    of their children, so doing text alignment within these is moot.  width 
    was deleted as well because it is implicitly set through padding*/
}

/* the entire chain in the selectors should be typed out.  :hover pseudo-class 
is removed, because unless you are changing styles due to hovering, they'll 
stay the unchanged */

#contact_menu > li > a:link, 
#contact_menu > li > a:visited, 
#contact_menu > li > a:active {
    color: #777;
}

#nav {
    background-color: #f00;
    list-style-type: none;
    text-align: center;
}

#nav > li {
    display: inline-block;
}

#nav > li > a {
    display: block;
    font: normal 30px/1.2 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-decoration: none;
    padding: 0 10px;
}
#nav > li > a:link,
#nav > li > a:active,
#nav > li > a:visited {
    color: #777;
}

/* I also removed the div surrounding your image */