Margin collapsing also happens between parent and child elements. : margin « CSS « HTML / CSS

Margin collapsing also happens between parent and child elements.

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>

    <head>

        <title>margin</title>

<style type='text/css'>

body {

    font: 12px sans-serif;

}

div.margin-wrapper {

    background: lightyellow;

    border: 1px solid gold;

    float: left;

    margin: 5px;

}

p {

    clear: left;

    margin: 5px;

}

div.margin-wrapper div {

    background: khaki;

    border: 1px solid black;

    width: 25px;

    height: 25px;

}



div#parent {

    margin: 5px;

    border: none;

    background: crimson;

}

div#child {

    margin: 5px;

}

</style>

    </head>

    <body>

        <p>

            Margin collapsing also happens between parent and child elements.

        </p>

        <div class='margin-wrapper'>

            <div id='parent'>

                <div id='child'></div>

            </div>

        </div>

    </body>

</html>

Related examples in the same category

1.	'margin' Example
2.	Margin with two values
3.	Margin with three values
4.	Margin with four values
5.	margin: 2em
6.	li margin: 0 0 0.25em 0 and padding
7.	margin: auto
8.	margin for top right left bottom
9.	Margin collapse
10.	Margin in four directions
11.	right left margin
12.	parent child margin
13.	auto margin
14.	The margin shorthand property can accept from one to four values.
15.	When three values margin: the top is the first value, the right and left sides are the second value, and the bottom is the third value.
16.	When two values margin: the top and bottom are the first value, right and left sides are the second value.
17.	When one value is supplied to the margin shorthand property, all four sides are specified with that one value.
18.	If the auto keyword is supplied for the left or right margins, the element that margin is applied to is aligned horizontally.
19.	Margin collapsing happens when the top or bottom margin of one element comes into contact with the top or bottom margin of another element.
20.	margin auto.html
21.	margin left auto
22.	margin right auto
23.	margin collapse 3
24.	margin collapse for nested elements
25.	margin collapse for nested elements with default padding
26.	margin collapse for nested elements with padding
27.	fixed double margin
28.	Using a division element with margins
29.	Use of margin and padding for block elements
30.	Margin and padding for html
31.	img margin-top: -96px; margin-left: -138px;
32.	p line-height: 150%; margin-top: 10px; margin-left: 80px;
33.	Padding and margin for List
34.	Zero Page margin
35.	fieldset border: 1px dotted #61B5CF;margin-top: 1.4em;padding: 0.6em;
36.	A demonstration of the margin property
37.	Margin settings
38.	Columns with margin
39.	* { padding: 0; margin: 0; }
40.	Use Minus margin to hide
41.	A negative margin
42.	margin: 5px;
43.	Color, font and text properties are inherited. Other properties, such as border, margin, and padding, are not inherited.
44.	When all four margin values are provided, each is provided in order clockwise, beginning with the top property.
45.	top and bottom margin
46.	using margin to make offset
47.	When all four values are provided, each is provided in order clockwise, beginning with the top property.
48.	When three values are supplied, the top is the first, the right and left sides are the second, and the bottom is the third.
49.	When two values are supplied to the margin shorthand property, the top and bottom are the first, right and left sides are the second.
50.	margin sets the size of the margin surrounding the border.
51.	A margin negative value moves it away from center.
52.	margin: 1em; assigns the size of the font to margin (i.e., font-size multiplied by 1).
53.	Set margin to 0
54.	Set margin to '0 0 0.5em 0'
55.	Define Margin with value and percent
56.	Body margin to 10%
57.	Body with margin: 5% 10% 0 10%
58.	LI margin: 0.33em 0.5em 0.5em 1.5em
59.	Add margin to offset block nearby
60.	Use margin to align block to left
61.	Use margin to align block to center
62.	Use margin to align block to right
63.	Margin between parent and children
64.	Use margin to offset child
65.	Margin between sibling
66.	margin collapse 2
67.	margin collapse with nested elements
68.	double-margin
69.	margin:0; assigns zero to margin. Zero is the only length that may be specified without a measurement.
70.	Margin Collapsing
71.	margin collapse nested elements padding
72.	margin collapse nested elements default padding
73.	margin collapse nested elements
74.	double margin fixed
75.	Margin collapsing with adjacent siblings.

java2s.com | Contact Us | Privacy Policy

All other trademarks are property of their respective owners.