simple image styling and manipulation

[drone4four]

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.

[sprech]

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

[Paulie_D]

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,

[drone4four]

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.

[Author]

Posts