Streaming live at 10am (PST)

Styling text with white background highlighter like opacity % w' padding?

I’m a visual designer, not a coder, so forgive me lack of knowing exactly what to do ;(

I’m trying to style a Hero box heading with a white opacity background color behind the text, but having trouble creating any padding between the (1) white background color box (I’ll call it highlighter) and the (2) text itself.

I’ve created a class called ‘txt_highlight’ & the padding doesn’t seem to be happening>

Any tips / tricks -or- is there just something my brain isn’t computing ;(


Create a div element, give it a class name, give it the translucid background color, give it a padding (like 30px).

Remove the background color from your text element, put the text element in the div element previously created.

From that technique, never hesitate to nest things. A div in a div with a text inside is perfectly normal. You can then spread the visual characteristics across elements in the hierarchy. Margins for the upper elements, then padding, background, corners and border then content. From the most general to the most precise.

There are many ways to achieve things. For instance you can probably fix your issue by giving the text a display:block property and padding.

1 Like