Search code examples
csspadding

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>

Solution

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