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;
}

Recent Posts

  1. Redirect single pages of post type in to post type archive page - WordPress
  2. Get details about available image sizes - WordPress
  3. Change shipping and billing address title - WooCommerce
  4. Add phone number to the output of the addresses on the "My Account" page - WooCommerce
  5. Conditional tags for order thank you page - WooCommerce

Your Questions / Comments

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