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