css padding and margin issue

Question

Inside a td I have 2 span. The first span is a day and the second span is the month. The second span has been rotated -90 degrees. My problem is that the right span "begins" lower than the first one. The problem seems that there is a top and bottom padding on the first span eventhough I set it at 0. In addition there seem to be margins around one of those 2 span eventhough I set everything at 0. Strange! So I am looking for 1/ No top and bottom padding on the first span. 2/ I would like "no space" between the 2 span. Hope someone can help. Thank you in advance for your help. Cheers. Marc.

http://cssdesk.com/TzLfN

My HTML :

<td> <span>12</span><span>FEB</span> </td>

My CSS :

body{ font-family:"Arial Black"; } td { padding:0; margin:0; background-color:red; } span:first-child { background-color:yellow; padding:0; margin:0; font-size:30px; } span:last-child { display: inline-block; background-color:green; font-size:12px; padding:0; margin:0; -moz-transform:rotate(-90deg); -webkit-transform: rotate(-90deg); }

It looks like the 2nd span is set to the width of the word FEB and it doesnt get rotated. If you remove the rotation, it fits how you want. — PAULDAWG
– PAULDAWG, Commented Feb 9, 2012 at 17:56

PAULDAWG · Accepted Answer · 2012-02-09 17:58:07Z

body{ font-family:"Arial Black"; } td { padding:0px; margin:0px; background-color:red; } span:first-child { background-color:yellow; padding:0px; margin:0px; font-size:30px; } span:last-child { display: inline-block; background-color:green; font-size:12px; padding:0px; margin:0px; width:11px; -moz-transform:rotate(-90deg); -webkit-transform: rotate(-90deg); }

Hope you dont care about the background color, if you do just change the red to something else. I set the width of the 2nd span to 11px. Remove the green background coloring and you should be good to go.

Hello Paul. Your solution works like a charm. Thanks :) Even when I change the font size of the first span, the second one is still aligned. I like that. Nevertheless I do not get how changing the width only makes it work. Do you get it? Thanks again
Because when you transformed the span, you only transformed the text. The span attributes of width and height did not get transformed and are still defined on the x,y rendering plane of the browser view. If you change the font size of the second span you'll probably have to adjust the width attribute again. Don't forget to mark as answered for future readers. Glad to have helped!

ACarter · Accepted Answer · 2012-02-09 18:07:04Z

0

Add

position:relative; bottom:-6px;

To the :last child one

You could use any other units of measurement as you wished

(I tried many other ways that didn't work, so this is a last resort)

edited Feb 9, 2012 at 18:07

answered Feb 9, 2012 at 17:42

ACarter

5,7479 gold badges42 silver badges60 bronze badges

3 Comments

Marc Over a year ago

Hello Carter. I am trying to avoid that solution. Thanks.

PAULDAWG Over a year ago

which css rule did you apply this to? I tried in each one and it just lowered the divs.

ACarter Over a year ago

Oh year, I didn't say. I used the :last child one. It just vertically centered the "feb" for me.

Collectives™ on Stack Overflow

css padding and margin issue

2 Answers 2

2 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Related