'How to get rid of unnecessary space above text HTML

I have this text element inside of a div. 1 You can see there is some blank space between the text and the border. I was wondering how to get rid of it. Here is the code

.fancy-blue-box {
  
  margin: auto;
  background-color: #3F7CAC;
  border-style: ridge;
  border-width: 15px;
  border-radius: 5px;
  border-color: #004E89;
  opacity: 1;
  float: top;
  color: aqua; 
  display: inline-block;
  margin: 10px;
  padding: 10px;
  line-height: 0px;
}

body {
  text-align: center; 
  
  font-family: 'Roboto', sans-serif;
  color: aqua;
  margin: auto;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<!DOCTYPE html>

<html>
  <body>

    <div class="fancy-blue-box" style="width: 200px; height: 150px;">
      <h4>
        Text
      </h4>
      <p>
        More text
      </p>
    </div>
  </body>

</html>

Any help is greatly appreciated!

htmlcss


Solution 1:[1]

Use this

   .fancy-blue-box {
      background-color: #3F7CAC;
      border-style: ridge;
      border-width: 15px;
      border-radius: 5px;
      border-color: #004E89;
      opacity: 1;
      float: top;
      color: aqua; 
      display: inline-block;
      margin: auto;
      display: block;
      padding: 0px;
      line-height: 0px;
    }

    body {
      font-family: 'Roboto', sans-serif;
      color: aqua;
      margin: auto;
    }

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
    <!DOCTYPE html>

    <html>
      <body>

        <div class="fancy-blue-box" style="width: 200px; height: 150px;">
          <h4>
            Text
          </h4>
          <p>
            More text
          </p>
        </div>
      </body>

    </html>

Solution 2:[2]

Simply remove the following padding and the text will appear at the edges of the box, remove the margin if space on the outside of the box becomes a problem...

.fancy-blue-box {
  
  margin: auto;
  background-color: #3F7CAC;
  border-style: ridge;
  border-width: 15px;
  border-radius: 5px;
  border-color: #004E89;
  opacity: 1;
  float: top;
  color: aqua; 
  display: inline-block;

  margin: 10px;   <---- This one!
  padding: 10px;  <---- This one!

  line-height: 0px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 sourabh singh
Solution 2 Cutey from Cute Code

Related Questions