Question 42477 in Html Question posted in
Some basic documentation can be found here.

How do I make text have no space in between them vertically? – Html

I want to make these 2 text boxes have no space in between them

The way the website looks

I tried using a container with the code display:flex; in it but that made the text uncentered.

body {
  background-color: lightblue;
}

h2 {
  color: navy;
  font-size: 200px;
  text-align: center;
}
<h1 style="text-align:center">The Mains Are</h1>
<h2>BACK!</h2>
Tags:

4

Answers


  1. 0

    First you can remove the margin and padding of h1 and h2, but if it’s not close enough you can wrap those two titles in a div and set the line-height to whatever you want

        <div class="slim">
      <h1 style="text-align:center">The Mains Are</h1>
      <h2>BACK!</h2>
    </div>

    .slim {
  line-height: 90px;
}
h1 {
  margin-bottom: 0;
}
h2 {
  color: navy;
  font-size: 200px;
  text-align:center;
  margin: 0;
  padding: 0;
}
    Login or Signup to reply.
  2. 0

    You can achieve this by giving the h2 element a margin:0. If you want to close the gap a little more, you can get it as close as you want by giving a negative margin-top value.

    body {
  background-color: lightblue;
}

h2 {
  color: navy;
  font-size: 200px;
  text-align: center;
  margin:0;
  margin-top:-72px; /*you can change the gap by changing this value*/
}
    <h1 style="text-align:center">The Mains Are</h1>
<h2>BACK!</h2>
    Login or Signup to reply.
  3. 0

    use flexBox

    *{
  margin:0;
  padding:0;
}
body {
  background-color: lightblue;
}
.main{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100vw;
  height:600px;
}
h2 {
  color: navy;
  font-size: 200px;
  text-align: center;
}
    <div class="main">
<h1>The Mains Are</h1>
<h2>BACK!</h2>
</div>
    Login or Signup to reply.
  4. 0 
    body {
  background-color: lightblue;
}

h1,h2 {
margin: 0;
}

h2 {
  color: navy;
  font-size: 200px;
  text-align: center;
  line-height: 131px;
}
    <h1 style="text-align:center">The Mains Are</h1>
<h2>BACK!</h2>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search