0

I want to remove the blank between MY WEB and With HTML, CSS, and Javascript.
I tried fixing paddding, margin, and width/height but nothing seemed to work.

How can I customize the size of the empty space?

.title {
  font-family: 'Secular One', sans-serif;
  font-size: 100px;
  text-align: center;
  margin-top: 150px;
  color: white;
}

body {
  background-color: #192a75;
}

.description {
  color: white;
  text-align: center;
  padding-bottom: 50px'
}

.button {
  font-family: 'Sen', sans-serif;
  background-color: white;
  font-size: 20px;
  width: 150px;
  height: 55px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Secular+One&family=Sen&display=swap" rel="stylesheet">
    <title>My Web</title>
  </head>
  <body>
    <div class="title">
      <p>MY WEB</p>
    </div>
    <div class="content">
      <div class="description">
        With HTML, CSS, and Javascript
      </div>
      <div class="button">
        CONTINUE
      </div>
    </div>
  </body>
</html>
AlbertKang1004
  • 33
  • 7

1 Answers1

2

Acutally <p> tag inside class "title" is having some default margin. So you just need to add following code in CSS file

.title p{
     margin: 0px;
}

Check out the following JSFiddle link https://jsfiddle.net/qzuca28w/

am2505
  • 2,194
  • 15
  • 19