Sto lavorando su una libreria grafica che funziona un po 'come le librerie di tipo Android e mi sono imbattuto in una domanda riguardante l'argomento dei margini e la cui responsabilità dovrebbero essere.
Sembra molto comune per le librerie grafiche mettere il margine sull'elemento stesso; cioè se vuoi cancellare 10 pixel di spazio attorno a un elemento in html / css, fai:
<div style="margin: 10px"></div>
La maggior parte delle librerie che vedo fanno la stessa cosa, con il margine impostato come proprietà del bambino.
Tuttavia, il punto dei margini sembra essere quello di consentire la spaziatura di elementi all'interno di un contenitore, in modo che i diversi elementi figlio non tocchino o siano più facili da leggere. Ciò significa che per determinare il margine, devi essere consapevole di dove nella pagina principale questo elemento verrà reso, cosa verrà mostrato intorno a esso e quanto spazio avranno questi altri elementi o bisogno di aggirarli.
Ma l'elemento stesso dovrebbe idealmente non essere consapevole di dove esattamente viene reso sulla pagina. Ciò consente di essere riusabile in punti diversi più facilmente.
Ad esempio, se hai una finestra di dialogo con un insieme di pulsanti sotto di essa, e i pulsanti devono avere 10 pixel di spazio tra di loro, ma il primo e l'ultimo devono toccare i bordi della finestra di dialogo, quindi impostare il margine sui bambini richiede di sapere esattamente dove si trova il bambino.
Ad esempio, potrebbe apparire come segue:
<div class='dialog'>
<button style="margin-right: 10px">button 1</button>
<button style="margin-right: 10px">button 2</button>
<button>button 3</button>
</div>
Oppure potrebbe essere simile a questo:
<div class='dialog'>
<button>button 1</button>
<button style="margin-right: 10px; margin-left: 10px;">button 2</button>
<button>button 3</button>
</div>
Ma in entrambi i casi, non è possibile scambiare facilmente i pulsanti perché il loro ordine nella lista è importante, anche se in realtà non dovrebbe. Eppure questo sembra essere il modo in cui tutte le librerie lo fanno. L'ho implementato allo stesso modo di me stesso senza pensarci, ma ora sto iniziando a chiedermi se questa sia la scelta giusta. Non sarebbe meglio mettere il margine sul contenitore?
<div class="dialog" style="space-out-children: 10px">
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
</div>
Questo rende il pulsante completamente indifferente su dove viene eseguito il rendering e quali elementi potrebbero o meno essere adiacenti ad esso. Posso facilmente utilizzare lo stesso pulsante in due posizioni, anche se è necessario un po 'di spazio intorno e l'altra no.
Quindi perché il margine è reso una proprietà del bambino invece del suo contenitore? Dal momento che tutti lo fanno, presumo che ci sia una buona ragione per cui non riesco a capire.