Question

I’m working with Vaadin, a GWT like framework for developing rich web applications.

Now I want to set the padding of a generated HTML-tag element in my markup and I’m having big problems with it…

This is how the markup looks taken from Firebug:

The tags

• v-formlayout-captioncell
• v-formlayout-errorcell
• v-formlayout-contentcell

all have padding-top: 12px and padding-bottom: 12px, I would really like to change this padding to 2px, but I can’t seem to get it to work.

I’ve already tried these combinations among others:

.v-formlayout-captioncell td {
    padding-top: 2px;
    padding-bottom: 2px;
}

---

v-formlayout-row td {
    padding-top: 2px;
    padding-bottom: 2px;
}

---

.v-formlayout-row th,
.v-formlayout-row td {
    padding-top: 2px;
    padding-bottom: 2px;
}

But none of them does any impact on the padding… could someone with better knowledge about CSS and HTML than me please take a look at this and give their opinion on how a CSS class should be written to do what I want. If you want me to provide more information then please ask! =)

Thanks in advance!

EDIT: Thank you Taryn East for your nice and graspable answer, it definitely taught me something new about CSS syntax! However, it seemed like the biggest problem I was having was that the padding parameters I was adding was overridden by the browser. But by using the !important CSS flag and writing the class as such it was fixed:

.v-formlayout-row td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

Answer 1

If the class is in the td, then it should be:

td.v-formlayout-captioncell

the css here is saying is “find a td with the class ‘v-formlayout-captioncell'”
By comparison, your css is saying: “find a td that is a descendant of something with the class ‘v-formlayout-captioncell'”

Edit:

The reason why the formatrow isn’t working is because CSS always picks the innermost style ie for

<tr class="a"><td class="b"></td></tr>

then anything in class b will override anything similar in class a.

In your case – the per-td padding was being set by an outside class, and you weren’t overriding it with your 2px padding on the td… and any padding you were putting in the tr was simply being overridden by the outside-defined class on the td.

“important” fixes that because that gives it a priority to the tr styles that overrides the innermost-td style despite them being “more inner” – because they only have normal priority. However – this is kind of a bit of a hack that is unnecessary in your case.

The better-practise fix is just to use the td.v-formlayout-captioncell class