WordPress.org

Ready to get started?Download WordPress

Forums

Ignore padding for images inside paragraph (4 posts)

  1. schmoukiz
    Member
    Posted 2 years ago #

    This looks simple at first glance, but I couldn't find a solution so far, after a lot of searching.
    I want to have different padding for images and text inside a div.
    The images are inserted in articles without uploader, from HTML, so they don't have a class of their own such as float. WordPress sometimes puts that inside <p>paragraph</p>, other times it's just the <img> without <p>.
    I can give attributes to ".entry_class img", but that will inherit the properties of the paragraph. That is, the image can have some extra padding than the text, but not less. And I need the image to be exactly the size of the div, while the text still hass some nice padding around.
    I've tried overriding the div properties with "!important" for "img" but with no success. There must be a solution to style images inside the loop.

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    please post a link to your site to illustrate exactly what you mean.

    you can obviously try to style:

    .entry_class p img { ... }

    or whatever css allows you to do.
    http://www.w3schools.com/css/

  3. schmoukiz
    Member
    Posted 2 years ago #

    Thank you for your reply. It's a theme I'm trying to reshape now, so it's not online. That's also part of the problem as I have many articles already online, without classes specified for images, and would be impossible to change those. Here are the essentials.

    The HTML part:

    <div class="article">
    <p><?php the_content($more_link_text , $strip_teaser, $more_file );?></p>
    </div>

    The CSS part:

    .article {
    	float:left;
    	width:100%;
    	padding:0;
    }
    
    .article p {
    	padding:5px;
    }
    
    .article img{
    padding:0;
    }

    I've tried different options, with or without <p> for the loop.

  4. schmoukiz
    Member
    Posted 2 years ago #

    I found something that helps on the vertical. Using a larger first letter also creates space between paragraph.

    .article p:first-letter{
    	font-size:30px;
    }

    Still, this is of no help when you want really large padding on the sides and no padding for pictures :(.

Topic Closed

This topic has been closed to new replies.

About this Topic