CSS3 Leeraum um ein Objekt erzeugen =================================== CSS Margin ---------- Hinweis zu text-indent wird auf 1. Zeile eines Fliesstetes ausgeführt, nachdem margin und dann ein vorhandenes padding ausgeführt worden sind. The CSS margin properties are used to generate space around elements. The margin properties set the size of the white space outside the border. With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left). Margin - Individual Sides CSS has properties for specifying the margin for each side of an element: margin-top margin-right margin-bottom margin-left All the margin properties can have the following values: auto - the browser calculates the margin length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Tip: Negative values are allowed. The following example sets different margins for all four sides of a
element: Example p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } Margin - Shorthand Property To shorten the code, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for the following individual margin properties: margin-top margin-right margin-bottom margin-left Example p { margin: 100px 150px 100px 80px; } So, here is how it works: If the margin property has four values: margin: 25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px If the margin property has three values: margin: 25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px If the margin property has two values: margin: 25px 50px; top and bottom margins are 25px right and left margins are 50px If the margin property has one value: margin: 25px; all four margins are 25px The auto Value You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins: Example div { width: 300px; margin: auto; border: 1px solid red; } The inherit Value This example lets the left margin be inherited from the parent element: Example div.container { border: 1px solid red; margin-left: 100px; } p.one { margin-left: inherit; } Margin Collapse Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. This does not happen on left and right margins! Only top and bottom margins! Look at the following example: Example h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; } In the example above, the
element: Example p { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } Padding - Shorthand Property To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for the following individual padding properties: padding-top padding-right padding-bottom padding-left Example p { padding: 50px 30px 50px 80px; } So, here is how it works: If the padding property has four values: padding: 25px 50px 75px 100px; top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px If the padding property has three values: padding: 25px 50px 75px; top padding is 25px right and left paddings are 50px bottom padding is 75px If the padding property has two values: padding: 25px 50px; top and bottom paddings are 25px right and left paddings are 50px If the padding property has one value: padding: 25px; all four paddings are 25px Example div.ex1 { padding: 25px 50px 75px 100px; } div.ex2 { padding: 25px 50px 75px; } div.ex3 { padding: 25px 50px; } div.ex4 { padding: 25px; } More Examples All the padding properties in one declaration This example demonstrates a shorthand property for setting all of the padding properties in one declaration, can have from one to four values. Set the left padding This example demonstrates how to set the left padding of a
element. Set the right padding This example demonstrates how to set the right padding of a
element. Set the top padding This example demonstrates how to set the top padding of a
element. Set the bottom padding This example demonstrates how to set the bottom padding of a
element. Test Yourself with Exercises! All CSS Padding Properties - - - - - - - - - - - - - Property Description padding A shorthand property for setting all the padding properties in one declaration padding-bottom Sets the bottom padding of an element padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an element Using width, max-width and margin: auto; - - - - - - - - - - - - - - - - - - - - - As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can). Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This