: PSD to HTML&CSS - my margins are wrong 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

@Jamie315

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:



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.

Vote Up Vote Down

@Shelley591

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.

Vote Up Vote Down