How do I move the text on top of the black?

HTML & CSS
1

978×146 3.87 KB

<style type="text/css"> 

.outer {
  max-width:958px;  /*968 */
    /*200*/
  height: 98px;  /*200*/
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

p {
  
  font-style: normal;
  font-size: 124px;
  font-family: impact;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  
}

.hr3 {
  color: #228DFF;;
}

.hr4 {
  color: FF0092;
}

.hr5 {
  color: #228DFF;
}

  


</style>

</head>
<body>

<div class="outer">
  <p>
    <span class="hr3">[</span> <span class="hr4">ENJOY THE MUSIC</span> <span class="hr5">]</span>
  </p>
</div>

</body>
</html>
2

Problem you have is you are setting outer to smaller than the font size, I checked your JS Fiddle and it looks ok if you make the height of outer around 150px

max-width:958px; /*968 */
/200/
height: 150px; /200/

966×166 18.4 KB

3

I want it to look like this.

958×102 3.44 KB

.outer {
max-width: 968px;
height: 102px;

4

line-height: 1; gets it to this.

987×143 3.62 KB

5

I think I got it. Can someone tell me if I have this code set up correctly.

<style type="text/css"> 

.outer {
  max-width: 968px; 
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

p {
  line-height: 0;
  font-style: normal;
  font-size: 124px;
  font-family: impact;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom:52px;
  padding-top: 50px;

}

.hr3 {
  color: #228DFF;;
}

.hr4 {
  color: #FF1493 ;
}

.hr5 {
  color: #228DFF;
}

</style>

</head>
<body>

<div class="outer">
  <p>
    <span class="hr3">[</span> <span class="hr4">ENJOY THE MUSIC</span> <span class="hr5">]</span>
  </p>
</div>

</body>
</html>
6

I’d just play with the line-height until it looks about right.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.music {
	line-height: .815;
	font-style: normal;
	font-size: 124px;
	font-family: impact;
	text-align: center;
	margin: 0;
	max-width: 968px;
	background-color: #000;
}
.hr3 {
	color: #228DFF;
}
.hr4 {
	color: #FF1493;
}
.hr5 {
	color: #228DFF;
}
</style>
</head>

<body>
<p class="music"> <span class="hr3">[</span> <span class="hr4">ENJOY THE MUSIC</span> <span class="hr5">]</span> </p>
<p>test</p>
</body>
</html>

The height of the glyphs in fonts will vary in browsers as will the leading top and bottom so it won’t be an exact science as browsers will differ.

If you set line-height:0 then the text will probably overlap when it wraps to a new line so I would avoid that method.

3 Likes
7

Hi,

As you use a fix height, why not try the same height you have given the outer? I.e. line-height: 98px;

(The 98px with font-size 124px is near the line-height value 0.8. The capitals in common font families usually fits in the 0.8 line-height, mind that’s leaving barerly no space between lines. The ascendings and descendings usually fits in 1.0.)

2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.