There are two main types of margin collapse: Collapsing margins between adjacent elements Collapsing margins between parent and child elements Using a padding or border will prevent collapse only in the latter case. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse. Thus, both overflow: auto and … Read more
Unlike div, p 1 which are Block Level elements which can take up margin on all sides,span2 cannot as it’s an Inline element which takes up margins horizontally only. From the specification: Margin properties specify the width of the margin area of a box. The ‘margin’ shorthand property sets the margin for all four sides … Read more
Here is a little code to accomplish it: LinearLayout ll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT); layoutParams.setMargins(30, 20, 30, 0); Button okButton=new Button(this); okButton.setText(“some text”); ll.addView(okButton, layoutParams);
In this instance, your div elements have been changed from block level elements to inline elements. A typical characteristic of inline elements is that they respect the whitespace in the markup. This explains why a gap of space is generated between the elements. (example) There are a few solutions that can be used to solve … Read more
SVG is inline by default. Add display: block to it and then margin: auto will work as expected.
You’re actually seeing the top margin of the #inner element collapse into the top edge of the #outer element, leaving only the #outer margin intact (albeit not shown in your images). The top edges of both boxes are flush against each other because their margins are equal. Here are the relevant points from the W3C … Read more
Found an alternative at Child elements with margins within DIVs You can also add: .parent { overflow: auto; } or: .parent { overflow: hidden; } This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse: .parent { padding-top: 1px; margin-top: -1px; … Read more
To help me remember the meaning of padding, I think of a big coat with lots of thick cotton padding. I’m inside my coat, but me and my padded coat are together. We’re a unit. But to remember margin, I think of, “Hey, give me some margin!” It’s the empty space between me and you. … Read more
TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box. To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn’t. Consider two elements one above the other each with padding of 1em. This … Read more