Sarathlal N

Vertical margin and padding are not working in labels – Quick fix

When creating forms in web pages, we want to use labels with input fields. To style these label elements, I always tries to add padding and margin on top and bottom with other styles.

But in default, this margin property and padding property on bottom and top on these label elements have no roles in web pages!.

Basically label elements are inline elements and vertical margins and vertical padding will not have any effect on such inline elements.

If still we want to apply margin and padding on top and bottom, there is a quick fix.

First make these labels as inline-block elements and then apply these vertical padding and vertical margin property on it. That is enough.

label {
 display:inline-block;
 margin-top:5px;
}

Need Help?

Do you need any help on CSS? I'm happy to help you.

Contact Me

Recent Posts

  1. Get variation product data on selecting variation options - WooCommerce
  2. Add TinyMCE WYSIWYG (Rich text area) meta box - WordPress
  3. Reorder product tabs in single product page - WooCommerce
  4. Download webpage for offline reading - wget
  5. Remove product tabs in single product page - WooCommerce

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about them, please get in touch.