Gap appearing below label element in form

HTML & CSS
1

Hi everyone,

The text within the <label> element within a form is wrapping onto two lines and the line-height is too large. I tried changing it using the following css but nothing happened:

table.webform label {font-size: 13px; line-height: 14px;}

Then I added this css:

label { display: block; margin: 0; padding: 0}

This successfully reduced the line-height but it also added a big space between the label and the form fields which I can’t get rid of.

Just wondered if anyone knows why this happened and whether there’s a workaround.

Thanks in advance.

2

Hi,

We’d need a little more to work on that that I’m afraid as it sounds like you have tried the obvious things and indeed the space may be from surrounding elements rather than the ones you were targeting or you may have more specific styles in your stylesheet. It is unlikely that you want all your labels to be display:block anyway.

If you can supply the css and html for the section that’s causing you trouble (or provide a link) then I’m sure we can pinpoint the problem :slight_smile:

3

Thanks for the reply. I just tried changing it to inline-block and it seems to have fixed the problem. Do you know the reason for this?

4

inline-block will allow dimensions to be applied and for the new line height to take effect but unlike block elements inline-block is a shrink to fit property and is only as wide as the content it holds.