0

I find measuring the distance between an element and text rather complicated. Cause I need to first know the biggest letter and measure the distance from that to the element. Then substract the padding from the line height. It would be much easier if I could display the line height as a box or something so I can measure just from that.

Is that somehow possible? How do you reliably measure the distance from text to an element to i.e. transfer it to css?

  • There's no simple way to measure things in photoshop and put into CSS with absolute accuracy. Instead, trust your eyes. A lot less painstaking and ultimately much saner. :) – DA01 Feb 4 '16 at 19:03
  • Tell our designer ;) But well the checked answer seems to be good enough in most situations. – steros Feb 5 '16 at 8:03
1

It depends what version of Photoshop you are using, but it has been made a lot easier in the recent updates of PS, especially in CC and I would recommend you to update to this version!

Simply select the Move tool (v) and when you are hovering over an element press and hold Ctrl. It will show you distance etc. Measure distance between elements in PS

Then you can either use pixels in css or rems etc. Hope this helps!

  • Thanks, this sometimes works. But then it just ignores an element and goes one element further so the distance is not correct. I use PS 2014. – steros Feb 4 '16 at 15:33
  • Ah you have to first select the element, i.e. with the text selector (if it is text). Then you choose the move tool and hover over the element in question whilst holding the control key. Awesome! – steros Feb 4 '16 at 15:36
  • But! To make it complete: The text area has to be as big as the text or the distance won't be correct. – steros Feb 4 '16 at 15:40
  • In regards to the text, the position is worked out from the height of the largest element, eg. the 'T' in the text block. When you are working with your CSS then you go by that distance too! It is hard to explain, but basically it's the correct way to do it! :) – McIvor Feb 4 '16 at 15:54
  • Right but at least in PS 2014 the text block has to be as big as the text, if it is bigger or even overlapping other text blocks it did not work for me. – steros Feb 4 '16 at 16:17
0

Showing the text box
View > Show > Layer Edgers
You selected layer will now be highlighted

Getting the distance
Use the ruler tool I sometimes behind hidden behind the eyedropper tool to get the actual distance. Keep the text box selected otherwise your highlighted layer will not show.

  • 1
    Don't we generally measure all the distances regarding 'texts' with respect to the text box that appears around? Oh yes we do! Measuring it w.r.t individual character length is NOT recommended. – Parth Feb 4 '16 at 11:25
  • @Dr..Net that mystical text box you are talking about is exactly what I'm looking for I think – steros Feb 4 '16 at 11:28
  • @Consume Coffee because I not always know what the largest letter of a font is – steros Feb 4 '16 at 11:28
  • @4485670 I just investigated a little more, try View > Show > Layer Edges, I'll just update my answer now. I've definitely just learnt something new. – Consume Coffee Feb 4 '16 at 11:32
  • @4485670 When using it for css you get it in the developer tools and then hovering the appropriate element in the DOM tree. In Photoshop, you can do it as in the above comment but be careful as the text box can also be made larger than the text that it contains. – Parth Feb 4 '16 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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