@Alex-Archer-I
Posted
Hi!
The problem you stumbled upon happened cos this 'learned' element is inside a container. Height of container is auto (which means the height of a text) and padding tends to falls outside of the parent element. So, margin of the picture moves only text but not the padding. (Phew... I really hope I explained it clearly)
Well, you can freely get rid of all those containers and style elements directly. That way paddings and margins will be more predictable (at least till you'll learn about 'margin collapsing' =)).
And by the way, you can use flex on the body tag to center all the content without margins. And you can use gap to create space between card's content - it's a bit easier.
Overall, you work is really accurate and neat =) Cool, happy coding =)
Marked as helpful
@Alex-Archer-I
Posted
@Alex-Archer-I
Sorry, I took a closer look at your work and I should clarify that this thing with padding happened cos span is inline element. So, you can change it's display to block to fix your issue.
But you can still get rid of containers, they aren't really necessary =)
@aduatgit
Posted
@Alex-Archer-I
Thank you very much for the feedback, that was really helpful and explained my problem quite well :)
@Alex-Archer-I
Posted
@aduatgit
You're welcome =)
Good that I managed to write about this inline thing before you read, otherwise my comment would have quite less sense =)
Anyway, glad that I could help. Ask or comment if need =)
