Post by Chris on Oct 23, 2017 23:51:24 GMT -8
Yes, as stated that affects every non-block-level content within the container, if you want to affect only the buttons then wrap a container only around the buttons and apply the alignment to that new container:
e.g. <div class="button-panel" align="center"><button>b1</button><button>b2</button></div>
That is really your preference but just keep in mind that mixing them does have pitfalls because when margins collide there's a phenomenon where one will consume the other leading to unexpected results. An example would be if you have a div with a 25px margin-bottom and another with a 75px margin-top right below it and you would logically assume the space between them to be 100px but not the case, the 75px would overpower the 25px and you end up with only 75px between the two elements.
A technique growing in popularity is the Lobotomized Owl which employs the adjacent CSS combinator (+) to accomplish a more well rounded spacing.
e.g. <div class="button-panel" align="center"><button>b1</button><button>b2</button></div>
That is really your preference but just keep in mind that mixing them does have pitfalls because when margins collide there's a phenomenon where one will consume the other leading to unexpected results. An example would be if you have a div with a 25px margin-bottom and another with a 75px margin-top right below it and you would logically assume the space between them to be 100px but not the case, the 75px would overpower the 25px and you end up with only 75px between the two elements.
A technique growing in popularity is the Lobotomized Owl which employs the adjacent CSS combinator (+) to accomplish a more well rounded spacing.
