Menu
I have the following script where the margin for the . portlet class is behaving strangely:
http://jsfiddle.net/mYx5y/19/
it should be adding 10px around each portlet, which should mean a gap of 20px between portlets. For some reason, I am only getting 20px if a portlet has a widget to the right or left of itself, but only 10px if the portlet has another portlet above or below it.
Why am I getting 10px vertically?
853
margin: 10px 5px 15px 20px; top margin is 10px. right margin is 5px. bottom margin is 15px. left margin is 20px.
If the padding property has four values: top padding is 10px. right padding is 5px. bottom padding is 15px. left padding is 20px.
A margin is the space around an element, while padding is the space inside of an element. You use a margin to ensure that other elements aren't too close to the element in question. You use padding to make space inside of the element itself.
Margins are used to create space around elements, outside of any defined borders. This element has a margin of 70px.
Because margins don't add up, they collapse. If you have two elements A and B, A margin=10px and B margin=15px, the spacing between A and B will be 15px.
Two solutions:
169
Because margins collapse, they are not added, just max()-ed (the biggest margin value of neighbouring objects will be used). Use padding if the space is part of your element.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
