Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS simple image styling and manipulation

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #239611
    drone4four
    Participant

    Check out this testcase: http://codepen.io/Angeles4four/pen/pyebOd

    I’m trying to get the padding and margin around this cat image to be perfectly equal all the way around. As of right now, with my codepen as is, the padding and margin are perfectly equal, but to the left and to the right of the image is a giant gap. How do I narrow this gap on the two sides so that it matches the size of the gap between the image and the border at the top? I’ve been trying all sorts of different values. No dice.

    Here is the exact same reduced testcase on my server so you can use the Inspect Element feature: http://angeles4four.info/catz-img-troubleshoot/
    Chrome’s Inspect Element feature indicates that the margin (orange) and padding (yellow) are perfectly equal but the img (blue) at the center is throwing me off. What the hell is going on here?

    Please keep in mind that the image in my production environment has a width of 425px and height of 310px, so I need to maintain these dimensions.

    Thanks for your attention.

    #239612
    sprech
    Participant

    Try changing the .img block by setting the margin horizontal set to auto and a fixed width of 425px as thats the width of your image. Seems to work.

    See here http://codepen.io/sprech/pen/WwpGRM#0

    #239616
    Paulie_D
    Moderator

    Well to start with there is no float:center value.

    You need to have the wrapping div shrink-wrap around the image, I used display:inline-block but there are other methods.

    Then you have to center that div

    Again there are multiple methods for doing that:

    http://codepen.io/Paulie-D/pen/yOMgyV

    One thing….we much prefer minimal demos here….all that extra stuff in the demo you provided was irrelevant to the issue….we only need the code that shows the problem. Wading through reams of irrelevant code doesn’t make it easy to help you,

    #239629
    drone4four
    Participant

    Thank-you, @sprech for your answer. This fixes the issue I’m having.

    And thank-you, @Paulie_D, you’ve answered my question too. I will be sure to minimize the irrelevant code in future CodePen test-cases when I post on forums.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.