eliminate space above div class

I’m sorry but it is really beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead. In the meantime, try using Firefox with the Firebug add-on for this kind of CSS work. Or use whatever developer tool is available in your web browser.
http://getfirebug.com/

A CSS issue inside WordPress is the same as a CSS issue outside WordPress. It’s just CSS.

When we answer CSS queries, all we’re doing is using a browser developer tool like Firebug (which Esmi recommended) to determine the solution. Firebug will tell you the styling applied to the paragraph; helping you understand what you need to override to change it.

And I still don’t get why this CSS question is “beyond the scope of these forums to deal with”, yet there are many, many CSS issues posted here that are addressed, and are therefore apparently within the scope of these forums.

I don’t get it neither. I used to say that it was beyond the scope of these forums to deal with CSS issues as well, but then I was told that it’s within the scope these forums by other mods.

Beats me how to discern which is which. All very, erm, ‘nuanced’ it seems to me.

Doesn’t matter much, if someone wants to help they can. It’s only if a theme is released under a license other than GPL that those people are really denied support.

Back to your issue,
Are you familiar with CSS nth-child?

You need to target the paragraph before the editorial notes and remove its bottom margin.

To target that paragraph, you could manually add a class to it and then target that, use CSS nth-child to target the 5th paragraph or use jQuery to target it.

Applying the class to the paragraph through the ‘text’ tab on your post/ page will be alright as long as you don’t accidentally remove it.
Then you could target that class in the CSS:

.entry-content p.className {
 margin-bottom: 0;
}

Applying CSS nth-child is alright if you’re not going to change the amount of paragraphs:

.entry-content p:nth-child(5) {
 margin-bottom: 0;
}

Applying jQuery would be the safest option because it could target the paragraph before the editorial notes, regardless which paragraph it is:

jQuery(document).ready(function($){

 $('.ednotes').prev().css('marginBottom', '0');

});

With Jquery you’ll need to first enqueue it using the methods discussed in this article: http://codex.wordpress.org/Function_Reference/wp_enqueue_script .

How do I have normal paragraph spacing between the ed notes and the beginning of the next para (beginning “I recall The Scientists’ first gig…”)

You can give the editorial notes a margin bottom by just using CSS:

.ednotes {
 margin-bottom: 24px;
}

Would be interested in any feedback on the code I finally applied. I know nothing about the fundamentals of good CSS practice. Is my solution OK?

It works, but there are 2 issues that I can see with it.
1. It doesn’t address the underlying issue.
2. Minus margins format differently on different browsers.

You can address concern no.2 by instead using CSS positioning. Positioning is more reliant across browsers than margin.

You’d just replace the margin-top property with top and add position: relative;

top: -24px;
position: relative;

When the page is narrowed as it would be when viewed on a cellphone, the ednotes styling disappears and it reverts to default text.

I think that’s because that style is within a media query.

I tried prefacing the ednotes code with @media screen and (min-width: 600px) {

All of the styles within that media query only apply when the browser is at a width of 600px or higher. So it won’t apply to 480px (standard mobile phone size).

You need to close off that media query and then put the styles below it, e.g:

}

.ednotes {
  color:#0000FF;
  font-size: .8rem;
  line-height: 1.1rem;
  text-align: justify;

  width: 95%;
  padding: 10px;

  top: -24px;
  position: relative;
  margin-bottom: 14px;
}

1. Which types of styling should go above the media query close-off, and which should come after – other than .ednotes, obviously? Is there any sort of general rule I should apply from now on?

That’s up to you. If you find a style should be applying to the mobile but isn’t, then remove it from that media query.

does it follow that it would also be better to change
margin-bottom: 14px;
to
bottom: 14px

CSS positioning moves elements. Since your bottom margin is not moving the editorial notes, it should not be converted to a position.