This tutorial will focus on two things: Outer spacing and outer edges.
Let's start with the outer margins. For a p-element that is defined directly within the body, the left and right window margins mean the distance to the outer borders of the body element. If several paragraphs follow one another, the information on the top and bottom outer margins means the distance between the individual paragraphs.
When defining the outer spacing and margins, negative values are also possible, allowing overlaps to be achieved.
Defining the outside margin
The outer margin and spacing are the forced space between the current element and its parent or neighboring element. The following CSS properties are useful in HTML elements that create their own paragraph or form a block.
The margin is the short form of the four properties margin-top, margin-right, margin-bottom and margin-left. The following values are possible:
- auto - the margin is calculated automatically.
- Percentage - refers to the element for which margin was specified.
- Length specification - negative values are also permitted. This allows elements to overlap.
Up to four values are permitted:
- one value - top, bottom, left and right margin
- two values - first value for the outside distance at the top and bottom, the second value for the outside distance to the right and left
- three values - the first value for the outside distance at the top, the second value for the outside distance at the left and right, the third value for the outside distance at the bottom
- four values - the first value for the outside distance at the top, the second for the right, the third at the bottom and the fourth at the left.
The following example shows the use of the general margin properties:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { background-color: yellow; } p.ex { margin: 30px 50px 30px 50px; background-color:#FF99FF; </style> </head> <body> <p>Building a camera rig</p> <p class="ex">In this video training, you will learn how to create a camera rig and move it safely through 3D space. A project file is included.</p> </body> </html>
In this example, two text paragraphs have been defined.
Spacing has also been assigned to the second paragraph.
margin: 30px 50px 30px 50px;
This specification means the following:
- 30 pixels distance to the top
- 50 pixel spacing to the right
- 30 pixel spacing downwards
- 50 pixel distance to the left
Individual specifications for the spacing
The general margin specification was introduced previously. However, you can also make individual specifications. The following properties can be used to specify the distance to the top, left, bottom or right for the individual margins of an element.
- margin-top - outer margin/distance at the top
- margin-right - outer margin/spacing to the right
- margin-bottom - outer margin/spacing at the bottom
- margin-left - margin/spacing left
The following values can be used for all four properties:
- auto - the margin is calculated automatically.
- Percentage - refers to the element for which margin- [top, right, bottom, left] was specified.
- Length specification - negative values are also permitted. This allows elements to overlap.
The following example shows how the individual specifications can be used effectively.
<!DOCTYPE html> <html> <head> <style> p { background-color: yellow; } p.ex { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px; } </style> </head> <body> <p>Building a camera rig</p> <p class="ex">In this video training, you will learn how to create a camera rig and move it safely through 3D space. A project file is included.</p> </body> </html>
The result looks like this in the browser:
Set the inside distance
The inner spacing is the forced space between the element content and its own element edge. The following CSS properties are useful in HTML elements that create their own paragraph or form a block.Padding is the abbreviated form of the four properties padding-top, padding-right, padding-bottom and padding-left. It can be used to define the width between the frame and the content of an element, i.e. the inner spacing.
- Percentage - refers to the parent element.
- Length specification
Up to four values can be specified in each case:
- one value - inner spacing top, bottom, left and right
- two values - the first value for the inside distance at the top and bottom, the second value for the inside distance on the right and left
- three values - the first value for the inside distance at the top, the second value for the inside distance on the left and right, the third value for the inside distance at the bottom
- four values - the first value for the inside distance at the top, the second for the right, the third at the bottom and the fourth at the left.
Here is another example:
<!DOCTYPE html> <html> <head> <style> p { background-color: yellow;} p.ex { padding-top: 25px; padding-bottom: 25px; padding-right: 50px; padding-left: 50px; } </style> </head> <body> <p>Building a camera rig</p> <p class="ex">In this video training, you will learn how to create a camera rig and move it safely through 3D space. A project file is included.</p> </body> </html>And here is the result in the browser:
The inner spacing can be defined using the four padding properties. The following four CSS properties are available for this purpose:
- padding-top - distance between the top edge of the content and the top margin
- padding-bottom - distance between the bottom edge of the content and the bottom margin
- padding-left - distance between the left edge of the content and the left margin
- padding-right - distance between the right edge of the content and the right margin.
The following values can be used for all four properties:
- Percentage - refers to the parent element
- Length specification
