CSS Padding on Script objects?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hi All,
Loving the new features,
I'm having some trouble with my site (http://rapitweet.co.uk). I want the 'Connect to Twitter' button to align with the top of the 'So, what's up?' box. I know that the 'Connect to Twitter' button has to be moved down 19 pixels to align. But I'm not sure how to go about it. I've tried using CSS padding but I don't think it has any effect on script objects, I've tried making a completely transparent 1x19 image which gave me some success, but I want to achieve it with HTML/CSS. Any ideas?
Callum Booth
Photo of Callum


  • 357 Posts
  • 32 Reply Likes
  • confused

Posted 8 years ago

  • 1
Photo of Shaun O'Connell

Shaun O'Connell

  • 5 Posts
  • 1 Reply Like
Official Response
Hi Callum,

I noticed you're using a style block to control the margin on span.mar.

There are two hiccups here:
1. The type attribute on the style element should read as: "text/css" and not "text\css"
2. Only 'block' elements can have margins applied, as part of the CSS Box Model. A span is considered to be an inline element. So, force the span.mar to be a block by using an additional property: display:block; This should now force the element to apply the top margin.

For more on the 'box model', read up here: http://www.w3schools.com/css/css_boxm...

Hope that helps,