The amount of space is limited, so the smaller the margin the more text we can have displayed horizontally. For a phone this is of course far more important than for a desktop or tablet. But is a margin of 0px recommended? Are there any guidelines for the minimal margin?
Depends on the Screen Size (or Resolution)
Reason for this is a margin for a large screen will look more on a small screen in case when given in pixel.
So it's better to decide in scale of percentage. So that it will look appropriate for different screen sizes. ( You will of course give spacing in pixel in each android layout file for different sizes)
Is 0 pixel recommended?
Actually this depends on the app. Many apps these days come with 0px spacing. This actually becomes a flexibility over the requirement.
Android have some guidelines, which may be helpful:
They deal mostly with interactive element's spacing, but the margins are applied to text content too.
Zero is never an option because, then, the edge of the screen becomes attached to the font and, therefore, becomes part of the font, making it harder to decipher.
In the few cases where this has been an issue, 8px is the closest to the edge we've gotten for text. I don't recall if 4px works in some cases but breathing room matters.
Zero would not be an ideal choice.
For me, the rule of the thumb is to leave enough space so that the scrollbar can fit on the screen without overlapping the text. That is, usually, 10px on both sides. This is enough for an easily readable sentence with enough words. But it also depends on the font-size used in the text.
The Medium app and mobile website leave about 20px space on both sides of the screen. Which also doesn't affect much of the reading experience. But beyond that, it gets a little harder to read as the eyes have to travel back more often. So, 10px to 20px would be the ideal margin for a mobile device.
I wouldn't use 0px. I go wide with 16px min - 24px max
My considerations are,
- Using margin when inputs exist (a form). I believe the content or copy should sit on the same margin as the input (and input labels if they sit above the input).
- I use this consideration because If I add a focus state to the input, I allow it to creep into the margin and have enough space to breath. If I used 0px how would I manage a focus state?
- I nice margin allows the content to read better in my opinion and doesn't impact the experience in any way, if you have a lot of content, shorten it but it will hardly add much extra vertical scrolling.
This is a great interactive example form the the UK Governments website. https://design-system.service.gov.uk/components/text-input/default/index.html