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?

Improve this question
2
  • 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, 2016 at 19:03
  • Tell our designer ;) But well the checked answer seems to be good enough in most situations.
    – steros
    Feb 5, 2016 at 8:03

2 Answers 2

Reset to default
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!

Improve this answer
7
  • 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, 2016 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, 2016 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, 2016 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, 2016 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, 2016 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.

Improve this answer
10
  • 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, 2016 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, 2016 at 11:28
  • @Consume Coffee because I not always know what the largest letter of a font is
    – steros
    Feb 4, 2016 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, 2016 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, 2016 at 11:35

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.