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!
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.
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.
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.
Thank you @lasjorg that worked! I appreciate the help so much!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.