[Theme Twentyeleven] Changing the paragraph spacing

Look at this screenshot https://snag.gy/XMdjf.jpg .
I’ve right clicked on the title, “You’ve found Sound Asleep – A Short Film Comedy” in Google Chrome and selected, ‘Inspect element’.

The developer tool exposes the HTML structure of the webpage and the CSS applicable to the inspected element. So, on the right you can see the CSS selectors that you need to target for that particular element. You can also see the margin that it currently has.

In Google Chrome’s developer tool, orange highlight symbolises margin and green highlight symbolises padding. Blue highlight is just the element selected.

You can then go forth and create a CSS style in your Child Theme stylesheet from the information presented by the developer tool.

Thanks – that’s really intersting – I will take a look around using this. I can see from the sreen grab that in the example you have highlighted, that it is telling me I am in h1, and that there is a padding beneath.

In the window below, is the code above the h1 text referring to it – it says padding bottom: 4px.

My problem is that even if that is the code that is relevant, I am not really sure what I would need to enter into the style sheet to alter it.

If I was editing directly into the twenty eleven them I would go to that point in the code and change 4 to maybe 1. But as I need to change it in the child theme, I am not sure exactly what code to enter to do this – is it something like:

h1 {
 padding-bottom: 1em;
}

Also, can you let me know if making changes to the theme should make typing in the visual editor appear more like it will in the published site? Currently the changes I have made to the paragraph margins do not make a difference in the visual editor, and so I am sure that my fellow site authors will end up getting their spacings all wrong!

You see I am basically not a coder and didn’t realise I’d need to be when I embarked on this!

I’m not even sure if the order I enter things in my child theme style.css matters (does it?)

thanks for helping this idiot fumble his way through a website for his film!

I’ve been having the same problem with spacing.
Following your suggestions I tried
p {
margin-bottom: 1em;
}
and even 0em
but nothing changed.
I then used firebug in firefox to find the line (like you described) and I found something interesting.
In my theme the line height and margin are defined a little differently:

p {
line-height: 24px;
padding-bottom: 25px;
}

now using px (instead of em) and padding-bottom instead of margin-bottom I was able to make my changes.

Thanks for the tips (and image) of the developer’s tools