Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jennifer Birks
Jennifer Birks
13,269 Points

Help with CSS padding in wordpress?

Hi guys,

I'm in the process of building my first website on wordpress and trying to use some custom css to style my posts page: http://www.firstaidcoursesuk.co.uk/news-blog/

I've added 20px of padding to my posts but there now seems to be an extra line of space at the top of each post and I can't figure out why this is! :(

When I remove the 20px padding on the posts the text aligns perfectly to the top, so I'm a little baffled as to why adding padding puts all this extra space at the top...

If anyone can help me that would be much appreciated!

Thanks

Jennifer

2 Answers

Christian Andersson
Christian Andersson
8,712 Points

Do you mean the spacing marked with orange in this picture?

test

If this is it, then find this and remove it:

.et_pb_post h2 {
  margin-top: 30px;
}
Jennifer Birks
Jennifer Birks
13,269 Points
Jennifer Birks
Jennifer Birks
13,269 Points

It worked!! Thank you ever so much for your help! :)

Christian Andersson
Christian Andersson
8,712 Points

No problem!

I use Google chrome when I want to debug margin and spacing issues - any layout issue really. Open chrome and go to your site, right click on the element you want to debug and choose "Inspect element". It will highlight the space it takes up as well as any padding and margin it may have. On the right-hand pane scroll all the way down and you can see an overview of the element. It's a great tool, try it! :)

Jennifer Birks
Jennifer Birks
13,269 Points

That's really useful to know - I'll check it out next time I have an issue! Thanks again :)