How to remove space at the top of page area, above my inserted image?

[sledbet]

Hi, I’m new to WordPress and CSS. I inserted an image at the top of the page/post area. Problem is, there’s a big space above the image that I can’t get rid of. I tried putting the CSS:  .site-content {margin-top: 0px;} .entry-header {display: none;}  in Main Options – Content Area – in Custom CSS Styling Field, but it didn’t work. Can anyone help? My site is ledbetterwrites.com. Thanks a bunch!

[scrambler]

If you inspect the page with your browser developer tools, you will find the space comes from several places.

First there is a default top margin on the image. You can remove that by adding a style attribute with a zero margin top on your image tag (switch the content editor to TEXT.
<img style=”margin-top:0;”…../>

Second there is a default padding on the .entry-content. It can be removed globally by putting a zero in Main Options > COntent Areas > COntent Area > Space between title and content.
If you only want to change it on that page, you can add the rule below in Main Options > Fonts & Custom > CUstom CSS Rule box

.page-id-7 .entry-content {padding-top:0;}

There is also a small 4 pixel top padding on #container that can be changed in Main Options > Wrapping Areas > Container area padding boxes

[sledbet]

Thanks, Scramber…I was able to change default padding on .entry-content and top padding on #container. 

About the default top margin on image- I cannot find a “Content Editor” anywhere. I did find the “Editor” menu choice though. I see no setting to switch it to TEXT. I don’t think you wish for me to go into the Visual Editor RTL stylesheet- /* Images */ section and add/change something in there do you? Confused…

[Weaver]

??????

I’m really confused here – what does the Content Editor have to do with anything? And what do you think that might be?

For editing the content of your pages and posts, you open then in the Pages and Posts panels, and that opens the TinyMCE WordPress content editor, which will always give you a choice of a Visual or Text view (unless you have a plugin that fiddles with that, or you’ve enabled one of the RAW editor options from the Weaver per page/post options). But that shouldn’t with the default top margin on an image?

And where did any mention of the Visual Editor RTL sheet come from?

On the theme and plugin edit menus you will find an option named Editor. This really is a very old concept, and I don’t even think they have any business being there any more. They really should never ever be used by anyone except a developer occasionally debugging a plugin or theme on an end user’s site. No one else should EVER use that editor for all sorts of reasons.

[sledbet]

Ok, so I added the TinyMCE Advanced plugin. I went to my front page where the graphic is. I clicked on the TEXT tab. It’s now showing me code. 

Where do I add the code  <img style=”margin-top:0;”…../>  that scrambler mentioned??? 

Below is a section of the code that I think pertains to my graphic-  logos-graphic.jpg

<span style=”font-family: ‘book antiqua’, palatino, serif; font-size: 13pt;”><a href=”http://ledbetterwrites.com/wp-content/uploads/2015/03/logos-graphic.jpg”><img class=” size-full wp-image-71 aligncenter” src=”http://ledbetterwrites.com/wp-content/uploads/2015/03/logos-graphic.jpg&#8221; alt=”logos graphic” width=”687″ height=”150″ /></a>Hello! I’m Sherri Ledbetter, a Tulsa freelance content writer, journalist</span>

<span style=”font-family: ‘book antiqua’, palatino, serif; font-size: 13pt;”> and copy editor. </span>

Thanks!

[scrambler]

Well, you add style=”margin-top:0;”  to your image tag so

<span style=”font-family: ‘book antiqua’, palatino, serif; font-size: 13pt;”><a href=”http://ledbetterwrites.com/wp-content/uploads/2015/03/logos-graphic.jpg“><img style=”margin-top:0;”  class=” size-full wp-image-71 aligncenter” src=”http://ledbetterwrites.com/wp-content/uploads/2015/03/logos-graphic.jpg” alt=”logos graphic” width=”687″ height=”150″ /></a>Hello! I’m Sherri Ledbetter, a Tulsa freelance content writer, journalist</span>

<span style=”font-family: ‘book antiqua’, palatino, serif; font-size: 13pt;”> and copy editor. </span>

[sledbet]

Oh I see, put the code inside the img tag. Whew! That did it.  Thanks so much Scrambler and Weaver!  ^:)^

[Weaver]

And the best editor plugin these days is WP Edit. TinyMCE Advanced is obsolete now.

[Author]

Posts