css Question posted in
Some basic documentation can be found here.

Css – auto left and right padding blocks top and bottom padding

I am a beginner to CSS and I see a strange problem.

I want to add top and bottom padding to my footer. I can of course use the padding-top and padding-bottom separately but I would like to use the padding property.

If I use padding: 45px auto for my footer, the top and bottom padding do not apply.
Whereas if padding: 45px 0 is used for the footer, the top and bottom padding works fine.

What’s wrong? I have already checked the padding MDN page and it does not even have mention of auto 🙁

Please help.

footer {
  border: 1px dotted grey;
  text-align: center;
  padding: 45px auto;
  padding: 45px 0;
}
<html>
<body>
    <footer>
        <p>&copy; 2024 Footer Text</p>
    </footer>
</body>
</html>
Tags:

2

Answers


  1. 0

    Padding can’t have auto as value, that’s invalid.

    If you just want to set top and bottom, you need to use padding-top/-bottom.

    If you want to center your elements left/right:

    footer{
    display: flex; 
    justify-content: center;
}
    Login or Signup to reply.
  2. 0

    Use padding-block

    footer {
  border: 1px dotted grey;
  text-align: center;
  padding-block: 45px;
}
    <html>
<body>
    <footer>
        <p>&copy; 2024 Footer Text</p>
    </footer>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search