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. Disabling Payment Methods in WooCommerce Based on Conditions
2. How to Update Product Quantity in WooCommerce Using Custom Code
3. Dynamically Generating a Table of Contents in WordPress
4. Direct Checkout in WooCommerce - Add Product to Cart from Checkout Page & Skip Shop, Product, and Cart Pages
5. Understanding the Impact of git reset --hard Command

This article was published on January 16, 2015

Your Questions / Comments

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