Why can't I add padding or margin here?

[troyb16]

Code Pen: https://codepen.io/troy_b16/pen/NWwRMNL

I’m trying to add spacing from the labels and the inputs so they aren’t so close together. I’ve tried everything I can and cannot get it to work. It’s seems as though my labels don’t even have padding or margin to play with when I inspect and I have no idea why.

Any help or suggestions would be awesome!

[lasjorg]

The label element is display type inline and the input element is inline-block.

MDN: The box model

If a box has an outer display type of inline , then:

• The box will not break onto a new line.
• The width and height properties will not apply.
• Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
• Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.

Set the label to some display type other than inline (block, flex, grid, etc.).

As an aside, if you set it to inline-block your <br> tags won’t have an effect but if you set it to block (etc.) it will. I would suggest you set it to a block type and remove all the <br> elements, then use margin and padding instead to create the space.

[troyb16]

Thank you @lasjorg that worked! I appreciate the help so much!