Want to pad post text without affecting post images

[middayminer]

Hello, I’ve set up some left and right padding for my wordpress post text which makes it more readable via shorter line width, but unfortunately styling p will also pad the full width images in the post with the same settings, making the browser auto-scale them down.

Other than manually using span each time with the desired settings for each paragraph(which also doesn’t quite work for me, it’s just indenting the first line for some reason), is there any way to keep the padding for my text while not affecting the images?

Thanks guys!

[Senff]

Would this help?

https://css-tricks.com/snippets/wordpress/remove-paragraph-tags-from-around-images/

[middayminer]

Hi Senff, thanks for that link! I really thought it’ll do the trick, but the issue remains. I’m using the Dynamik theme for the Genesis framework, so I think I’ll check with tech support to see if this is a known issue. You have given me a great place to start though!

[Tom Houy]

If you use margins instead of padding for the text, you could create a style for IMG tags that are within P tags and reset the margins on them to zero by using negative values equal to the padding, or whatever you like. Something like:

.mystyle p img { margin-top: -20px; margin-right: -20px; margin-bottom: -20px; margin-left: -20px; }

You can’t use negative values for Padding.

[middayminer]

Hi Tom, I just tried your method out. Here’s what happened:

.entry-content p {
margin-left: 12px;
margin-right: 12px;
}
(What I’m trying to implement here. It scales down by 24px any images reaching the full width of the content area)

.entry-content p img {
margin-left: -12px;
margin-right: -12px;
}
(the new bit)

Margin styling the img tags seems to only alter their position for me, not ‘rescale’ them, so to speak. For example if I add an value like margin-left: -160px, images start clipping out of the content area instead of shrinking in size.

[Tom Houy]

It’s kind of a WordPress annoyance/convenience depending on how you look at it, but you can read more about the issue here:

http://wordpress.org/support/topic/prevent-wordpress-from-wrapping-p-tags-around-images

Another option would either be to remove the P tags after you insert an image, I suppose.

[middayminer]

Great, now I need to see if there’s a code snippet to add said div tags for images. :)

edit: lo and behold http://ahjira.com/stop-wordpress-from-wrapping-images-in-p-tags/

edit 2: Doesn’t work for me. Losing sunny disposition.

[Author]

Posts