How to decrease space between two tags within a div

StackOverflow https://stackoverflow.com/questions/21715146

  •  10-10-2022
  •  | 
  •  

Pregunta

I have a H1 and H2 within a div tag called "welcome". I am trying to decrease the space between the word welcome and the second line of text. I'm struggling to figure this out, but I feel like it will be something simple. Any help would be greatly appreciated. Below is an image to show what I'm talking about and my html/css.

enter image description here

This is my 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>

This is my 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;
}
¿Fue útil?

Solución

Try line-height: 0.5em; for example

Otros consejos

Try playing with the line-height and/or 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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top