CSS Padding - What gives the "box" its dimmensions?

Hello crowd!!! I am struggling to understand how padding and margin works. I am currently on this lesson ( Basic CSS: Add Different Padding to Each Side of an Element).

For some reason, I can’t get my head around the fact that, before beginning to do the exercise, the blue and boxes already has dimensions. Where are these dimensions specified?

Also, is the padding being applied form the word because it has been centred?

Please help, it is driving me crazy.

You need to add padding to the .blue-box similar to how the .red-box padding is set.

Thanks so much. I have actually done the exercise but I am struggling to understand, where do the boxes get their initial dimensions from?

The .blue-box gets its dimensions from the text inside the h5 tag. This is a block level element and the .box class is set to text-align: center. Try changing .box to text-align: right.

:astonished: Amazing!

Thanks for the explanation…much appreciated.

Really helpful indeed.