Forum:Padding of inline elements

red text text produces:

red text

text

As you can see its the area within the borders of the inline element that get colored.

reducing line-height to 1.0 one does not reduce the size of the colored area

instead it would cause the 2 boxes (with 'text' inside) to overlap.

This creates trouble when the lower one is colored because it cuts off the descenders on the line above.

I have tried everything to reduce the colored padding within the box but nothing works.

Granpa 21:59, August 17, 2011 (UTC)

Are you asking for something like that? 22:25,8/17/2011 22:25, August 17, 2011 (UTC)


 * No. I am trying to reduce line-height to squeeze lines together but when I do that and need to highlight part of a line it overwrites the descenders of the line above.
 * You can see this happen yourself just by selecting the text in the code at the very top of the page. The descending part of the letter 'g' in "background" is over written when the line below it is selected.
 * Granpa 00:19, August 18, 2011 (UTC)


 * I think the problem is better illustrated by this:

red text normal text padding: 5px padding: 10px padding: 20px padding: 20px with background

text loooooooooooooo00oo0oooooooooooooooooong text


 * If I set a margin in all those it will change the horizontal margin but it will have no effect vertically.
 * The conclusion is that the presence of a border doesn't change the height of lines of text in a paragraph.


 * Since you are not restricted to put only integer numbers in the line-height, you can do this (line-height: 1.5em):

red text normal text padding: 5px padding: 10px padding: 20px padding: 20px with background

text loooooooooooooo00oo0oooooooooooooooooong text

Or this (line-height: 1.9em): red text normal text padding: 5px padding: 10px padding: 20px padding: 20px with background

text loooooooooooooo00oo0oooooooooooooooooong text


 * It's an acceptable practice because you are the one controlling the vertical increases, in this case 1px for border and 0px for padding and margin.
 * Since you are the one decreasing the line height, you can very well make it 1px bigger. Like so:

 red text text
 * Yes, I exaggerated it. :p
 * The only trick here is that sometimes a style from an inner box overrides the outer ones. In my example, the style needs to be in the pre and it's not possible to put a div (with the style) encompassing the whole thing.

19:54, August 18, 2011 (UTC)