24

I was looking at an answer that had a 'run code snippet' section, and the buttons below it look misaligned - the 'copy snippet to answer' button is higher than the 'run code snippet' button by 1 pixel.

Here's a link to the question, although I'm sure any question/answer with a 'run code snippet' section will look like this. Also, attached is an image of the 2 buttons enter image description here

after looking at the styles in chrome dev tools, looks like the property that's causing this weirdness is the line-height property, which is set to 1, unchecking that seems to fix the alignment (not sure if that's the correct fix though)

Another weird thing I noticed when inspecting the styles with dev tools is the 'copy snippet to answer' is actually an input, which has a margin top/bottom value of 5px being inherited from an input rule. Without this button, the parent div that holds these buttons would actually sit slightly closer to the code section above it, and closer to the line below it.

That doesn't seem like intended behavior, I would think that the parent div should be positioned consistently whether the 'copy snippet to answer' button is present or absent - but that's just my opinion.

Anyway, hope this is helpful.

Update

interestingly, looking at this question, the code snippet buttons in the question are aligned correctly, but in the answer, they're misaligned

6
  • 5
    No repro in FireFox 61.0.1, both buttons are alligned perfectly, and un-cheking the line-height just makes both buttons slightly larger. Commented Jul 7, 2018 at 9:03
  • 4
    Looks like my Chrome 67.0.3396.99 is affected, but only at 100% zoom: i.sstatic.net/CaCjh.png Commented Jul 7, 2018 at 20:57
  • 1
    Chromium has the same effect at all zooms. (if you are curious)
    – Trooper Z
    Commented Jul 7, 2018 at 21:10
  • 1
    @ThomasWeller Chrome 67.0.3396.99 at 110% zoom, I see that the second button is 1px taller than the first one.
    – Jesse
    Commented Jul 9, 2018 at 8:15
  • This smells like a Chrome bug... it appears to be very sensitive to both font-size and the position of other items on the page.
    – Shog9
    Commented Jul 18, 2018 at 20:27
  • Looks fine for me at all zoom levels, Chrome 72.0.3626.121 Win10 Commented Mar 17, 2019 at 23:21

0

You must log in to answer this question.

Browse other questions tagged .