- This topic is empty.
March 19, 2016 at 7:03 pm #239611drone4fourParticipant
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.March 19, 2016 at 8:14 pm #239612sprechParticipant
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.March 20, 2016 at 4:27 am #239616Paulie_DMember
Well to start with there is no
You need to have the wrapping div shrink-wrap around the image, I used
display:inline-blockbut there are other methods.
Then you have to center that div
Again there are multiple methods for doing that:
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,March 20, 2016 at 5:26 pm #239629
- The forum ‘CSS’ is closed to new topics and replies.