0

I am having trouble with replicating exact margins from the PSD in CSS. Whenever I measure a margin with a select tool I get, for example, 32px. Then I put this in my CSS code:

div {
margin-top:32px;
}

But even though the margin is correctly set (checked with Firebug), the look of that element is still weird, like way off. The margin seems too big, I have to calculate it by eye after setting the PSD to 100% view instead of using those raw numbers.

How can I configure my Photoshop to give me correct measures that I can then apply in CSS so that PSD and CSS margins (and basically all measures) match?

Improve this question
12
  • Are other properties altering your CSS? Inherited styles, padding, line-height, etc?
    – Scott
    Jun 16, 2015 at 20:42
  • No, I am sure they don't. The numbers are correct, whatever I type in CSS is perfectly working, but it looks completely off when compared by eye to the PSD. I have to make corrections to the numbers. For example when I make a screenshot of the website and put it over my PSD it's easy to tell the elements are off.
    – NakedCat
    Jun 16, 2015 at 20:44
  • 2
    Is your image in Photoshop set to 72 dpi?
    – digijim
    Jun 16, 2015 at 20:52
  • No, it's at 96 dpi. This is weird, I never changed it, it might have been a bug, because my PS crashed a lot last week. This should fix the problem, right?
    – NakedCat
    Jun 16, 2015 at 20:56
  • 3
    72 dpi is the web standard screen resolution, so it should give you a one-to-one relationship between your image when viewed at 100% in Photoshop, and your browser on the PC.
    – digijim
    Jun 16, 2015 at 21:21

2 Answers 2

Reset to default
3

There isn't necessarily a direct correlation between pixel measurements in Photoshop and how CSS works in the browser. In other words, if you need 32px of space on your page, you may have to go with something like 28px to account for margin or padding on another element.

In general, it's best to design things 'loose' so things can have a few pixels give and take. Pixel perfection in the browser is a bit like tilting at windmills.

Improve this answer
2
  • 1
    Even though there might be an actual cause behind this specific problem this answer is the better one in the grand scheme of things. Designing for pixel perfection in a medium as interactive and interchangeable as the web, especially in 2015 with the reign of responsive design, is only going to cause you headache.
    – gburning
    Jun 16, 2015 at 22:38
  • I understand that, but something as simple as margins measured in a PSD should be very closely reflected in the CSS, not exactly, but you know, at least close. Mine are way off, sometimes 1.5 or 2 times to big. I will have to go with the second answer, because it directly solves my problem.
    – NakedCat
    Jun 16, 2015 at 22:54
1

It's true that image resolution is meaningless on the web. What determines how images are sized is the overall pixel dimensions of the images at whatever screen resolution of the display device.

But for the purposes of judging pixel distance for web design, if you set your image in Photoshop to 72 dpi, it should give you a one-to-one relationship between your image when viewed at 100% in Photoshop, and your browser (at it's default zoom-level) on a desktop computer. Here's an example. I screen-grabbed this page and opened that resulting image in Preview on my Mac (I'd use Photoshop, but my PC's BIOS broke two days ago). I moved the image over so this page would show in the background, and viewed the images' details. Notice the resolution of said screen-grab:

example of 72dpi web resolution

The elements all appear the same size both on the web page in the background, and on the 72dpi image displayed at 100% in Preview.

Mobile devices will display at higher resolutions, so naturally your elements will appear smaller on those screens. But it will be a proportional shift, so the relationship between, say, an image and it's border/padding, will be proportionally equal.

Improve this answer
1
  • 1
    This is incorrect. There is no 'web standard screen resolution'. It's true that 72ppi in photoshop is what mapped to 'actual pixel size' but it really has no real bearing on web graphics. It is correct to say "assuming it's not a retina image, be sure to view it at actual size in photoshop to measure).
    – DA01
    Jun 17, 2015 at 3:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.