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. Scaling WordPress - How Custom Database Tables Solve the Post Meta Bottleneck
2. WordPress Transients Explained - A Developer's Guide to Site Performance
3. Behind the Click - The Hidden Journey of Your Web Requests
4. Automating Code Linting with GitHub Actions for WordPress Plugins
5. Comprehensive Guide to Linting PHP, JavaScript, and CSS in WordPress Plugins Using Composer

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.