Text Wrapping is not tight enough, and creates paragraph breaks

you have a 20px margin-bottom on the .wp-caption that is causing the image.

(learn to use the FireBug extension of FireFox)

Alright, I have downloaded FireBug and learned some of the basics, which led me to eventually add some custom CSS which seems to have fixed the loose text wrapping problem.

But I still can’t seem to solve the ‘line of space like a paragraph break’ problem I mentioned above, so I still can not put images into the middle of paragraphs.

Right now I have the following in my custom CSS:

#content .wp-caption {
	line-height: 18px;
	margin-bottom: 5px;
	margin-top: 5px;
	text-align: center;
	max-width: 100%;
}

#content .alignleft,
#content img.alignleft {
	display: inline;
	float: left;
	margin-right: 15px;
	margin-top: 5px;
}

#content .alignright,
#content img.alignright {
	display: inline;
	float: right;
	margin-left: 15px;
	margin-top: 5px;
}

I was hoping that eliminating the top margin entirely or changing the line-height would solve the issue, but that only introduced new formatting problems, so I have since changed all of those margin-top values back to 5px and the line-height back to its original value of 18px.

Is this something I would need to alter the CSS of the paragraph to fix, or is there some aspect of modifying the .wp-caption that I am overlooking, such as a change to the display line?

I looked at the post and it doesn’t seem to have the extra space above/below the image that your screenshot shows. I am using Firefox 40.0.3 in Windows 7 Pro.

To get tighter text on the edges, you could try adding hyphenation to the word-wrapping (which I hate):

.entry-content, .entry-summary {
    word-wrap: break-word;
    hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
}

Yes, sorry, I linked the image because that page no longer has the broken set-up. But you can still see what I mean about the paragraph break above the image of M. Night Shyamalan near the bottom of this post.

And it has nothing to do with the indent (I’ve already checked with and without indent formatting).

Ok, you have something else going on related to how you are including the images in the post. Here’s the code:

<p style="text-indent: 2em;"><em>The Sixth Sense</em>, above all, rests on the shoulders of great performances from Bruce Willis, Haley Joel Osment, and Toni Collette, yet it delivers in almost every other area of filmmaking as well. It has a tonally appropriate and</p>
<div id="attachment_182" style="width: 314px" class="wp-caption alignright"><a href="https://i2.wp.com/thegemsbok.com/wp-content/uploads/2015/09/Shyamalan-2008-Bollywood-Hungama.jpg"><img style="" title="" class="wp-image-182 size-full" src="https://i2.wp.com/thegemsbok.com/wp-content/uploads/2015/09/Shyamalan-2008-Bollywood-Hungama.jpg?resize=304%2C384" alt="Shyamalan 2008 (Bollywood Hungama)" height="397" width="314"></a><p class="wp-caption-text">Photo courtesy of <a href="https://www.bollywoodhungama.com/" target="_blank">Bollywood Hungama</a>, via <a href="https://commons.wikimedia.org/wiki/File:M._Night_Shyamalan_2008_-_still_40580_crop.jpg" target="_blank">Wikimedia Commons</a></p></div>
<p style="text-indent: 2em;">moving score; an unnerving cinematography favoring colder colors and off-balance compositions; and a script wherein just enough is revealed about the logic of this fictional world for the viewers to suspend their disbelief with the film’s fantasy elements.</p>

Whatever you are doing is causing a <div> with the image to be inserted into the paragraph which breaks it up. Or maybe the Visual Editor sees the DIV and adds paragraph tags automatically or something.

Might try disabling the visual editor in your profile, edit the post, and remove the extra paragraph tags.

Alright, I’ll see what I can do.

Thanks for all of your help.