I'm working on a graphics library that works a bit like the Android-type libraries and I ran into a question regarding the topic of margins and whose responsibility they should be.

It seems very common for graphics libraries to put the margin on the element itself; ie if you want to clear 10 pixels of space around an element in html/css, you do:

<div style="margin: 10px"></div>

Most of the libraries I see do the same thing, with the margin being set as a property of the child.

However, the point of margins seems to be to allow spacing out items inside a container, so that the different child elements don't touch, or are easier to read. This means that in order to determine the margin, you must be aware where in the main page this element is going to be rendered, what will be shown around it, and how much room these other elements will have or need around them.

But the element itself should ideally not be aware where exactly it is being rendered on the page. This allows it to be reusable in different spots more easily.

For example, if you have a dialog with a set of buttons beneath it, and the buttons need to have 10 pixels of space between them, but the first and last one need to touch the edges of the dialog, then setting the margin on the children requires you to know exactly where in the list the child is.

For example, it could look like this:

<div class='dialog'>
  <button style="margin-right: 10px">button 1</button>
  <button style="margin-right: 10px">button 2</button>
  <button>button 3</button>

Or it could look like this:

<div class='dialog'>
  <button>button 1</button>
  <button style="margin-right: 10px; margin-left: 10px;">button 2</button>
  <button>button 3</button>

But in both cases, you can't easily swap the buttons around because their order in the list matters, even though really it shouldn't. Yet this seems to be how all the libraries do it. I implemented it the same way myself without thinking about it, but now I'm starting to wonder whether this is the right choice. Would it not be better to put the margin on the container instead?

<div class="dialog" style="space-out-children: 10px">
  <button>button 1</button>
  <button>button 2</button>
  <button>button 3</button>

This makes the button completely uncaring about where it is being rendered and which elements may or may not be adjacent to it. I can easily use the same button in two locations, even if one requires a bit of space around it and the other should not.

So why is it that margin is made a property of the child instead of its container? Since everyone does it, I'm assuming there's a good reason for it that I can't figure out.

  • Since everyone does it, I'm assuming there's a good reason for it that I can't figure out. -- There doesn't have to be a good reason. People do things for all sorts of reasons, including solely "because that's how everyone else does it." – Robert Harvey Jun 23 '16 at 14:47
  • Yeah, if that's the final conclusion, so be it :) I'm just wondering if there's a good reason for it and it's not just copy-catting based on some ancient and obsolete ideas. – Erik Jun 23 '16 at 15:03
  • It looks to me that spacing between child-elements and the margins of an element should be separate concerns. The margin property just gets abused to achieve a certain spacing due to lack of a more suitable property. – Bart van Ingen Schenau Jun 23 '16 at 15:11
  • In that case, it might help to post an answer on how I've misunderstood the purpose of margins? That might also explain my confusion. – Erik Jun 23 '16 at 15:13
  • Margin calculation involves a communication of intention (in general sense) from the child elements to the container. For mixed child element types, a "margin around myself" is a good way of expressing such intent to the container; such approach is used in word processors for decades. As you have found out, there are some use-cases where the "margin around myself" does not correctly capture the intention. Such containers may require customized layout logic; sometimes it could be piggy-backed on top of the existing facility (the "margin around myself"); if it couldn't, some code is needed. – rwong Jun 23 '16 at 16:29

Your Answer

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

Browse other questions tagged or ask your own question.