Question

我在div标签中有一个名为“welcome”的H1和H2。我试图减少欢迎词和第二行文字之间的空格。我正在努力解决这个问题，但我觉得这会很简单。任何帮助将不胜感激。下面的图片展示了我正在谈论的内容以及我的html / css。

enter image description here

这是我的HTML

<html>
<head>
<meta charset="utf-8">
<title>Playing with backgrounds</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<a href="index.html">
<div id="logo">
</div>
</a>

<div id="welcome">
<h1>Welcome</h1>
<h2>
To 
<span class="gold"> Promise Land Partners</span></h2>

</div>


<div id="bottom_bar">
</div>

</div>
</body>
</html>

这是我的css

body {
    background-image: url(img/dot.png), url(img/background.jpg);
    background-repeat: repeat, no-repeat;
    background-position: top left, center center fixed;
    background-size: auto, cover;;
    margin: 0px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

#logo {
    background-image:url(img/PLP.png);
    background-repeat: no-repeat;
    background-position: top left;
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
}

#logo:hover, #logo:active {
    background-image:url(img/PLP_pushed.png);
}

#bottom_bar {
    background-image:url(img/bottom_bar.jpg);
    position: fixed;
    bottom: 0;
    height: 27px;
    width: 100%;
}

#welcome {
    background-image: url(img/welcomepanel.png);
    background-repeat: no-repeat;
    position: relative;
    left: 0;
    top: 70px;
    height: 261px;
    width: 100%;
    padding: 10px;
    margin: 0;
}

h1 {
    color:white;
    padding-left: 90px;
    font-size: 6em;
    margin: 0;
}

h2 {
    color: white;
    font-size: 4em;
    padding-left: 20px;
    margin: 0;
}

.gold {
    color: #ee9f00;
    font-size: .75em;
    margin: 0;
}

Answer 1

调整h1 / h2的margin

可以使用负边距！

http://dev.w3.org/html5/markup/h1.html

http://dev.w3.org/html5/markup/h2.html

http://dev.w3.org/html5/markup/h3.html

http://dev.w3.org/html5/markup/h4.html

http://dev.w3.org/html5/markup/h5.html

http://dev.w3.org/html5/markup/h6.html

Answer 2

尝试line-height: 0.5em;例如

Answer 3

尝试使用line-height和/或margin

http://jsfiddle.net/Sg6QQ/

h1 {
    color:white;
    padding-left: 90px;
    font-size: 6em;
    margin: 0;
    line-height: 1;
}

h2 {
    color: white;
    font-size: 4em;
    padding-left: 20px;
    margin: -0.4em 0 0 0;
    line-height: 1;

}

enter image description here

如何减少div中两个标签之间的空间

3 个答案: