html - CSS Centering by using Line-Height

Question

I don't understand why there is a gap between the paragraph and the div element, below is my code. I am new to CSS.

.center {
      line-height: 200px;
      height: 200px;
      border: 3px solid green;
      text-align: center;
     }
.center p {
display: inline-block;
vertical-align: middle;
background-color: green;
}

 <div class="center">
    <p>I am vertically and horizontally centered.
    </p>
 </div>

Answer 1

您的段落在浏览器默认情况下具有顶部边距。将其设置为 margin-top: 0; 并且不会有差距。