B. Clay Shannon B. Clay Shannon - 4 months ago 16
HTML Question

How can I move the second line up vertically, reducing the space between it and the line above it?

I've tried reducing the vertical space between two lines of text using various CSS properties, such as

margin-top
and
padding
, but nothing seems to work.

The two lines look like so:

enter image description here

I want them much closer together, so that they are almost touching. No matter what I do with the
margin-top
property, though, it's not enough and eventually gets to a point where I'm making things even worse.

Here is the CSS and HTML:

<style>
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: white;
}
.titletext {
font-size: 2.8em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
.titletextjr {
font-size: 1.4em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
</style>
</head>


<body>
<div class="container body-content">
<div class="jumbotronjr">
<div class="col-md-3" style="margin-top: 1cm">
<img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="PRO*ACT usa logo">
</div>
<div class="col-md-9">
<label class="titletext" style="margin-top: 0.1cm;">eServices Reporting</label>
<br/>
<label class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</label>
</div>
</div>


What change or addition do I need to make to get these lines closer together (specifically, for the second line to move up vertically)?

Answer

There is a large space between them because your .jumbotronjr class has a line-height: 2.1428571435;. Remove this and it will remove the space between your text.

.jumbotronjr {
  padding: 12px;
  margin-bottom: -16px;
  font-size: 21px;
  font-weight: 200;
  line-height: 2.1428571435; /* <--- Remove this */
  color: inherit;
  background-color: white;
}

JSFiddle