HTML/CSS 定位和间距

Question

我是编码新手，使用这个资源已经有一段时间了，但这是我的第一个问题！

这里是相关网页的链接：http://www.andrewkennedy.ie/

我添加了明亮的背景只是为了便于查看不同元素的开始和结束位置。

我想知道如何去除元素之间的空白（边距和填充设置为 0），以及如何获取蓝色部分的内容，并将它们放到绿色部分，不影响了我名字的中心位置。换句话说，我希望我的名字保持原样 - 在中心 - 然后在窗口的最右侧显示带有“电子邮件”和“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>  

还有一个我的 CSS 的精简版（省略了不相关的部分）：

/* Title CSS*/
 #title {
    background-color: #00ff00;
    color: #000000;
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 40px;
    text-align: center;
    letter-spacing: 5px;
    width: 100%;
    margin: 0;
    padding: 0;
}
/* Contact Menu CSS */
 #contact_menu ul {
    text-align: right;
    list-style-type: none;
    margin: 50px 50px 0 0;
    padding: 0;
}
#contact_menu ul li a {
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 30px;
    text-decoration: none;
    text-align: right;
    width: 100px;
    font-weight: 400;
}
/* Navigation Menu CSS */
 #nav ul {
    background-color: #ff0000;
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav ul li {
    display: inline;
}
#nav ul li a {
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 30px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width: 200px;
}

任何帮助将不胜感激。谢谢你的时间。

安德鲁

Answer 1

您在 h1 标签中放置了元素。 h1 具有浏览器强加的自然边距。无论如何，您都不应该将元素包装在 h1 标签中。将其更改为没有边距的 div，空白将消失。

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

这是对标题 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>

Answer 2

您的代码肯定需要改进。这是我的优化和 cmets 的问题：http://jsfiddle.net/QJcsB/。

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

更新的 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>

还有，CSS：

/* 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 */

Answer 3

正如其他用户所说，您已将您的名字放在 h1 标签内。这些标签内部已经带有边距，它们将用于具有大量空间的页面，并且可以用于文章标题之类的内容。对于您的情况，您可以删除 h1 标签并将其替换为段落标签（根据需要设置它们的样式），或者您可以更改 h1 的边距。在您的 CSS 中，您可以更改 h1 标记的边距，以自定义网站的外观。

这看起来像这样

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