0

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>
Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Eric
  • 69
  • 7
  • 1
    Without more information on what you're trying to do, its hard to give the best answer. p tags have margins by default, so if you set `margin: 0;` on `.center p` then it will appear how you expect. You don't need `vertical-align: middle;` in this case. – yuuuu Dec 01 '21 at 13:00
  • @Temani Afif There are two problems with this code. The `margin` should be set to 0, *and* the `line-height` should go inside the `p` and not the `div`. So this is not a duplicate. – Michael Haddad Dec 01 '21 at 13:08
  • Thanks, Michael, I have just done what you said, yes, the gap get much smaller, however a very narrow gap still exist....why? – Eric Dec 01 '21 at 13:12
  • remove vertical-align AND add margin:0 – Temani Afif Dec 01 '21 at 13:22
  • @MichaelHaddad it's a duplicate because the real issue is to center a text and we have a ton of duplicate for such question. margin:0 is a sub issue – Temani Afif Dec 01 '21 at 13:24
  • Hi Temani, I have removed the vertical -align and add "margin: 0: there, however, there is a very narrow gap between the border and the paragraph, which can be seen clearly even the gap gets much smaller.... – Eric Dec 01 '21 at 13:34

1 Answers1

-1

Your paragraph has a margin-top by browser defaults. Set it to margin-top: 0; and there won't be gap.

Csikós Zoltán
  • 24
  • 3