I have two questions, both relatively small.

For the first, I'm trying to match up the top margin of my game-info element, which is denoted with the gray rectangular element with the black border in my image, with the top margin of my advertisment element, which is to the right with the purple border and has the word 'Adverisement' in gray lettering. Specifically, I want to move the game-info box up so they both match. Right now, they both have a top margin of 0.938em, which leads me to believe they should be matching, but it looks like the game-info box is a bit lower for some reason. Maybe my eyes are playing tricks on me, but I have the feeling the discrepancy is due to game-info's parent element (the blue bordered element) and the advertisement elements being floated to the left. I'm just unsure how to fix it, as they both have the same value for their top margins. Any ideas? Or am I just seeing things?

My other question has to do with the text in the game-info box. The top line has a bit more padding/margin to the left than the bottom line. Right now, both lines are spanned text with only a breakline element between them. I'm betting the difference in padding is due to the difference in font sizes used in each span. Again, I'm not sure how to efficiently fix it. Specifically, I'm not sure if putting each line in its own div would be overkill.

EDIT: D'oh, Picasa only generated a tumbnail. here's a link to a better version.

1 answer


You can find out the exact calculated margin values (among other useful info) by using the developer tools for whichever browser you're using. (e.g. inspecting the elements in Chrome and look at the Computed Style section). The reason they are matching up could have to do with borders and whatnot. Make sure you understand how values are calculated (http://www.w3.org/TR/CSS2/syndata.html#length-units).

Answered almost 8 years ago by Dorian Patterson