Take a look at the following code, which is a simplified version of a bigger problem I'm having:\[code\]<!DOCTYPE html><html><head><style type="text/css"> div {border-width:0px 5px; border-style:solid; border-color:black; width:400px; margin:0; padding:0; background:red;} div:nth-child(2) {background:green;} p {color:yellow; text-transform:uppercase; font-size:40px;margin:0;padding:0;}</style></head><body><div><p>Hello World</p></div><div><p>Hello World</p></div></body></html>\[/code\]It should create something like this:
What the client has asked for is for the black left border and black right border to be the exact same height as the yellow text. That is, the height of the black bars should not include the extra space between the top+bottom of the yellow text and top+bottom of the container.One way I can think of doing this is to set a fixed height on the containing div, then give the div an overflow:hidden. Next I will use a negative margin-top on the p tag. Can anyone think of a better approach? I really don't like the approach I mentioned because my client is a design nazi and will expect things to be pixel perfect across all the different operating systems, different browsers, and different screen resolutions. From my experience, if I try to position elements by hard coding pixel values into my CSS, and those elements still need to be relative to elements that vary in size (due to dynamic content), it can be a night mare.Are my concerns warranted? If so, is there a better way to make the borders exactly the same height as the text?