the paragraph seems it's not a part of the parent

August 9, 2023

I am a junior in css
I have a footer and 2 paragraph in it
but when I Give border to the footer

footer {
 border: 2px solid red;
    text-align: center;
    height: 50px;
}

    <footer>
      <p>
        واخر دعوانا ان الحمد لله رب العالمين
        <a href=""> اللهم احسن خاتمتنا </a>
      </p>

      <p>اللهم انى اسألك حسن الخاتمة</p>
    </footer>

only the first paragraph is bordered
the second paragraph not bordered as like it’s not a part of the footer

>Solution :

You’ve given the <footer> an explicit height of 50px, but the text within it exceeds that height. So you’re seeing it overflow from the container.

You can remove the height:

footer {
  border: 2px solid red;
  text-align: center;
}

<footer>
  <p>
    واخر دعوانا ان الحمد لله رب العالمين
    <a href=""> اللهم احسن خاتمتنا </a>
  </p>
  <p>اللهم انى اسألك حسن الخاتمة</p>
</footer>

Or, I suppose depending on what you want to do, other options include handling the overflow differently. For example, if for some reason it must be 50px in height and you want the user to scroll to see the rest of the content:

footer {
  border: 2px solid red;
  text-align: center;
  height: 50px;
  overflow-y: scroll;
}

<footer>
  <p>
    واخر دعوانا ان الحمد لله رب العالمين
    <a href=""> اللهم احسن خاتمتنا </a>
  </p>
  <p>اللهم انى اسألك حسن الخاتمة</p>
</footer>

Other options include modifying the <p> styles within the <footer> to reduce the whitespace so that it fits within the intended height, etc. How you want to style it is up to you, but the original problem was simply that the contents didn’t fit the container.