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. Automating Release Generation with GitHub Actions
  2. WP CLI Commands to Bulk Delete Entries in WordPress Database
  3. Split a Single CSV File into Multiple Files Using the Split Command - Bash
  4. Migrating code repo from BitBucket to GitHub
  5. Streamlining Development - Our Journey with Git, Bitbucket, and Jira

Your Questions / Comments

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