How to get rid of unnecessary space above text HTML-CodePudding

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  style="width: 200px; height: 150px;">
      <h4>
        Text
      </h4>
      <p>
        More text
      </p>
    </div>
  </body>

</html>

Any help is greatly appreciated!

CodePudding user response：

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  style="width: 200px; height: 150px;">
          <h4>
            Text
          </h4>
          <p>
            More text
          </p>
        </div>
      </body>

    </html>

CodePudding user response：

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;
}