What is padding in mp3. CSS margins and padding: differences between margin and padding properties
Let me tell you right away - this is a very important lesson. After studying it, you will be able to place elements on the page, set indents between them, create them inside a separate specific block, and set margins.
padding
Padding is a property that sets the amount of padding an element has from the inner edge of the border to the content. The content can be plain text, an image, or a child element that can also have its own fields.
The units can be pixels (px) or percentage (%).
#block (
padding: 12px; /* indentation from block borders to content - 12 pixels on all sides */
}
It is possible to specify a field on only one specific side:
padding-top- property that creates fields at the top.
padding-right- property that creates fields on the right.
padding-bottom- a property that creates fields at the bottom.
padding-left- property that creates fields on the left.
#block (
padding-bottom: 25px; /* bottom margin 25 pixels */
padding-left: 15px; /* left margin 15 pixels */
}
As you noticed, if you specify fields on 2 or 3 sides in this way, you will get a long code. There is a shorthand for the padding property for this purpose. It indicates all 4 values in turn - from each edge in one line, the movement goes clockwise, starting from the top:
Padding: TopPadding RightPadding PaddingBottom PaddingLeft;
#block (
padding: 25px 10px 15px 6px; /* top 25px, right 10px, bottom 15px, left 6px */
}
margin
The margin property, unlike padding, sets the amount of indentation between the borders of elements.
If the element is a child, then the padding is the space from the element's border to the inner edge of the parent's border.
If an element does not have a parent, then the indentation is considered to be the free space set by the property to the edges of the frame of the surrounding elements.
#block (
margin: 4px;
}
To specify indentation only on certain sides, the following properties exist:
margin-top- property that creates indents at the top.
margin-right- property that creates indentation on the right.
margin-bottom- a property that creates indents at the bottom.
margin-left- property that creates left indentation.
Like the padding property, margin also has the ability to abbreviate values for different sides. The movement goes clockwise, from the top field:
Margin: TopMargin RightMargin Margin Bottom Margin Left;
#block (
margin: 15px 10px 5px 25px; /* top 15px, right 10px, bottom 5px, left 25px */
}
Thank you for your attention!
In the previous chapter, we mentioned CSS properties such as margin and padding. Now we will look at them in more detail and consider how they differ from each other and what features they have.
You can create spaces between elements in one or another way, but if padding is the indentation from the content to the edge of the block, then margin is the distance from one block to another, the interblock space. The screenshot shows a clear example:
Padding separates content from the block border, and margin creates gaps between blocks
As you can see, the fields and CSS padding differ from each other, although sometimes without looking at the code it is impossible to determine which property is used to set the distance. This happens when the frame or background of the content block is missing.
The following properties exist to set margin or padding in CSS on each side of an element:
Padding:
- padding-top: meaning;
- padding-right: meaning;
- padding-bottom: meaning;
- padding-left: meaning;
Fields:
- margin-top: meaning;
- margin-right: meaning;
- margin-bottom: meaning;
- margin-left: meaning;
Values can be specified in any CSS units - px, em, %, etc. Example: margin-top: 15px .
There is also a very convenient thing like shorthand for margin and padding CSS. If you need to set margins or padding on all four sides of an element, you don't have to write the property for each side individually. Everything is made simpler: for margin and padding you can specify 1, 2, 3 or 4 values at once. The number of values determines how the settings are distributed:
- 4 values: padding is set for all sides of the element in the following sequence: top, right, bottom, left: padding: 2px 4px 5px 10px;
- 3 values: the padding is set first for the top side, then simultaneously for the left and right, and then for the bottom: padding: 3px 6px 9px;
- 2 values: the padding is set first simultaneously from the top and bottom sides, and then simultaneously for the left and right: padding: 6px 12px;
- 1 value: equal padding is set for all sides of the element: padding: 3px;
The same rules apply to the CSS margin property. Please note that you can also use negative values for margin (for example, -3px), which can sometimes be quite useful.
Collapse margin
Imagine the situation: two block elements are located on top of each other and they are given margin fields. The top block is set to margin: 60px , and the bottom block is set to margin: 30px . It would be logical to assume that the two bordering fields of two elements will simply touch and, as a result, the gap between the blocks will be equal to 90 pixels.
However, things are different. In fact, in such a situation, an effect occurs that is called collapse, when the largest in size is selected from two adjacent fields of elements. In our example, the final gap between elements will be 60 pixels.
The distance between blocks is equal to the larger of the values Collapsing margin only works for the top and bottom margins of elements and does not apply to the margins on the right and left sides. The final gap value is calculated differently in different situations:
- When both margin values are positive, the resulting margin size will be equal to the larger value.
- If one of the values is negative, then to calculate the size of the field you need to get the sum of the values. For example, with values of 20px and -18px the field size will be:
20 + (-18) = 20 – 18 = 2 pixels. - If both values are negative, the moduli of these numbers are compared and the number with the larger modulus (hence, the smaller of the negative numbers) is selected. Example: you need to compare the values of the -6px and -8px fields. The moduli of the numbers being compared are 6 and 8, respectively. It follows that 6 -8. The resulting field size is -8 pixels.
- In the case where the values are specified in different units ah CSS, they are reduced to one, after which they are compared and the larger value is selected.
- The margin size for child elements is determined in an even more interesting way: if a child has a larger margin than its parent, then priority is given to it. In this case, the sizes of the top and bottom margins of the parent will be the same as those specified for the child. In this case, there will be no distance between parent and child.
From the author: When I first started learning CSS, I kept getting confused about margin and padding. They seemed very similar, and in some cases gave the same result. In this tutorial, you'll see the difference between CSS margin and padding, and how these properties affect the space between elements on the page. We will also discuss collapsing margins and using different units of measurement when creating responsive websites. We’ll end the article with a couple of tips on layout using margin and padding.
Block model
Elements in CSS are represented as rectangular boxes. The size of a rectangular block is determined by the properties of the element: content, padding, frame, margin.
The element's content area is located in the middle. Next, padding surrounds the content area. The frame surrounds the padding, and the margin is the outer layer, i.e. it is outside the element. To better understand what we are talking about, below is a diagram.
As you can see from the diagram, padding is a layer that extends an element from the outer edge of the content area to the inner edge of the frame. This property controls the distance between the element's border and its content. Padding affects the size of an element on a page, but it has no effect on the spacing between elements on a page.
If you need to increase or decrease the distance between elements, use margin. The margin property does not affect the size of the element in any way.
It is important to remember that the sizes of all blocks on a web page depend on the block model used. There are two block models: W3C block model, traditional block model.
According to the W3C block model, the width of an element is calculated from the content of the block without taking into account padding and margin. Padding and border are added on top given dimensions, which can lead to unexpected consequences for the page layout.
For example, let's take a block with a width of 200px and a height of 200px, padding of 10px on all sides and a border of 2px on all sides. The browser does not see the 200px block. The browser calculates the horizontal space required to display the block, and it is 224px: 200(width)+2(left border)+10(left padding)+10(right padding)+2(right border)=224px. Since this is a square, the height will also be 224px.
On the other hand, the traditional block model takes the sum of the content, padding and border as the width. This means that if your block is 200px wide, the browser will calculate the horizontal space needed to display it, and it will be 200px, including padding and border. The result is more predictable and easier to work with.
By default, all browsers use the W3C block model. The model can be set manually using the box-sizing property. Two values are accepted: content-box (W3C) and border-box (traditional model). The traditional model is more intuitive, which has made it the most popular among web developers.
Here's how to use box-sizing to use the traditional model in your project:
html ( box-sizing: border-box; ) *, *:before, *:after ( box-sizing: inherit; )
html ( box - sizing : border - box ; * , * : before , * : after ( box - sizing : inherit ; |
If you remember things faster when you do things yourself, try experimenting with Guy Routledge's fun interactive demo.
Setting margin and padding
You can use the padding-top, padding-right, padding-bottom, and padding-left properties to control the padding on all four sides of an element. Padding can also be specified via a shorthand property. If a single padding value is written, CSS uses it to determine the padding for all 4 sides:
/* all 4 sides */ padding: 10px;
If 3 values are presented, the first is responsible for the top, the second for the left and right, and the third for the bottom:
/* top | horizontal | bottom */ padding: 1em 20px 2em;
If all 4 values are presented, then each is responsible for top, right, bottom and left, respectively:
/* top | right | bottom | left */ padding: 10px 10% 2em 15%;
In the demo below, the orange background is the content area for different elements, the white area between the frame and the content is padding:
The external margin, like padding, can be controlled on all 4 sides using the properties margin-top, margin-right, margin-bottom and margin-left. You can also set margin for all 4 sides at once using the shorthand property.
/* all 4 sides */ margin: 10px; /* vertical | horizontal */ margin: 2em 4em; /* top | horizontal | bottom */ margin: 2em auto 2em; /* top | right | bottom | left */ margin: 10px 10% 2em 15%;
What to remember
Use the correct units of measurement
When working with padding and margin, avoid absolute units of measurement. Such units do not adapt to changes in font sizes and screen width.
Let's say you set the element's width to 50% and margin to 15px. At a width of 1200px, the width of the element will be 600px, and the margin will be 15px. At 769px width the element's width will be 384px and the margin will still be 15px.
The element's width changed by 36%, but its margin remained the same. In most cases this is not the biggest problem. However, if you set the element's margin to a percentage, you will have more control over the page layout on all screens. Everything will look proportional without sudden jumps in the applied margin and padding values.
Likewise, you might want to add padding to text elements on the page. In most cases, you want the padding to be proportional to the font size on the element. This is impossible to do in absolute units. However, if you set the padding to em, it will automatically adjust to the font size. The demo below shows scaling in action.
How browsers calculate margin and padding for different units of measurement
Browsers calculate final margin and padding values differently depending on the units of measurement.
Margin and padding, specified as a percentage, are calculated relative to the width of the container. That is, 5% padding will be equal to 5px if the container width is 100px, or 50px if the container width is 1000px. Don't forget that the top and bottom values are also calculated based on the width of the container.
In the case of em, the margin and padding are based on the font size of the element. In the previous demo, the padding on the bottom three text elements is 1em. Because of different sizes font, the calculated padding value will always be different.
There are also 4 viewport units of measurement vw, vh, vmin and vmax. In this case, the margin and padding values will depend on the viewport. For example, padding 5vw will be equal to 25px with a viewport width of 500px, and padding 10vw will be equal to 50px on the same viewport. You can study these units of measurement in more detail in the article on the SitePoint website “CSS Viewport of Units of Measure: Quick Start”.
If you're a beginner, knowing how these units work will help you quickly understand why padding and margin on HTML elements change depending on the size of the parent, font, or even viewport. And this will give you the ability to control your layout.
Collapse of margins
You also need to know about the concept of collapsing margins. In certain situations, the top and bottom margins on two elements can collapse into one. This phenomenon is called margin collapse.
Let's say you have two elements one below the other, i.e. on the same level. If you set a margin-bottom of 40px on the first element, and a margin-top of 25px on the second, then the total margin between the elements will not be equal to 65px. The indentation will be equal to the value of the larger margin, i.e. 40px.
Likewise, margin can collapse between the parent and the first or last child. This happens if there is no border, padding or inline content separating the child and parent margins. In this case, if there is no padding or border on the parent, margin child element will "flow" from the parent.
This behavior can be corrected. To do this, you need to add a barrier between the parent and child margins. The demo below shows how adding a border or padding to the parent element can fix the problem.
In the case of negative margins, the final value of the collapsed margin is equal to the sum of the positive margin with the smallest negative one. You can study the topic of collapsing margins in more detail in the article “Collapsing Margins” by Adam Roberts.
Interesting ways to use margin and padding
Sometimes margin and padding can help solve layout problems. Below are some examples:
Maintain aspect ratio in images
Often, images on a page have different aspect ratios. If you need to show all images with the same aspect ratio, CSS padding will help you.
To do this, you need to set the height of the parent to zero, and the padding-top property of the parent should be equal to the aspect ratio value, expressed as a percentage.
For example, an aspect ratio of 16:9 is achieved by padding: 56.25% 0 0 0. The value 56.25 is obtained by (9/16)*100. Using this method, you can calculate padding percentages for any other aspect ratio.
Conclusion
If you're just starting to learn CSS, I hope this tutorial helped you understand the difference between margin and padding. You need to learn how to set margin and padding using abbreviations and appropriate units of measurement. In the last section, I showed two interesting ways to use properties in layouts, and also gave you links to resources for further learning. If you have other tips on CSS margin and padding, please post them in the comments.
Sets the value of the margins around the element's content. The margin is the distance from the inner edge of the element’s frame to the imaginary rectangle that bounds its contents (Fig. 1).
Rice. 1. Margin to the left of the text
The padding property allows you to set the margin value for all sides of an element at once or define margins only for specified sides.
brief information
Syntax
padding: [<размер> | <проценты>] {1, 4}
Designations
| Description | Example | |
|---|---|---|
| <тип> | Indicates the type of the value. | <размер> |
| A && B | The values must be output in the order specified. | <размер> && <цвет> |
| A | B | Indicates that you need to select only one value from the proposed ones (A or B). | normal | small-caps |
| A || B | Each value can be used independently or together with others in any order. | width || count |
| Groups values. | [ crop || cross ] | |
| * | Repeat zero or more times. | [,<время>]* |
| + | Repeat one or more times. | <число>+ |
| ? | The specified type, word, or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | <радиус>{1,4} |
| # | Repeat one or more times separated by commas. | <время># |
Values
You can use one, two, three or four values, separated by a space. The effect depends on the number of values and is shown in table. 1.
The size of the fields can be specified in pixels (px), percentages (%) or other units acceptable for CSS. When specifying the margin as a percentage, the value is calculated from the width of the element's parent.
Sandbox
Winnie the Pooh was always not averse to a little refreshment, especially at eleven in the morning, because at that time breakfast had long ended, and lunch had not yet begun. And, of course, he was terribly happy to see that the Rabbit was taking out cups and plates.
div ( background: #e4efc7; padding: (( playgroundValue ))px ; )
Example
Result this example shown in Fig. 2.
Rice. 2. Applying the padding property
Object Model
An object.style.padding
Specification
Each specification goes through several stages of approval.
- Recommendation - The specification has been approved by the W3C and is recommended as a standard.
- Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
- Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of a draft that has been discussed and amended for community review.
- Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
- Draft ( Draft specification) - the first draft version of the standard.
Browsers
Browsers
The following notations are used in the browser table.
This manual will help you better understand these CSS properties like border, padding and margin. These properties greatly help developers position elements on the page according to the layout.
Let's create a div and give it the properties margin, padding and border.
Padding property
The CSS padding property specifies the distance between the border of an element and its content. You can define it like this:
- padding-top: 10px;
- padding-right: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
This entry can be shortened:
- padding:25px 50px 75px 100px;
- top 25px
- right 50px
- bottom 75px
- left 100px
- padding:25px 50px 75px;
- top 25px
- right and left 50px
- bottom 75px
- padding:25px 50px;
- top and bottom 25px
- right and left 50px
- padding:25px;
- all 25px
Note: the padding value is added to the element's width and depends on the element's background.
In other words, we have a div element with class div-1:
Div.div-1( width:150px; padding: 25px;)
The browser will add left and right padding to the element's width. As a result, we will get an element with a width of 200px.
Border property
The CSS border property allows you to define the style and color of an element's border.
border-width
The border-width property is used to determine the width of the border. The width is specified in pixels or using one of the predefined values: thin, medium, or thick.
border-color
The border-color property is used to define the color of the border. Color can be set in the following ways:
- name - the name of the color, for example, “red”
- RGB - defines the RGB value, for example, "rgb(255,0,0)"
- Hex - defines a hex value, for example, "#ff0000"
border-style
- dotted: Defines a precise boundary
- dashed: Defines a dotted border
- solid: Defines a thick border
- double: Defines two boundaries. The distance between them depends on the border-width value
- groove: Defines a 3D depressed border
- ridge: Defines a 3D convex border
- inset: Defines the boundary so that the block wobbles pressed in
- outset: Defines a boundary so that the block rolls convex
You can write the element's border properties in a shorthand way:
Div.div-2( border:1px solid #ccc; )
Margin property
The CSS margin property specifies the amount of space around an element. Margin clears the space around the element (outside the border). Margin has no background color and is always transparent.
You can define margin values for an element like this:
- margin-top:100px;
- margin-bottom:100px;
- margin-right:50px;
- margin-left:50px;
This entry can be shortened:
- margin:25px 50px 75px 100px;
- top margin 25px
- right margin 50px
- bottom margin 75px
- left margin 100px
- margin:25px 50px 75px;
- top margin 25px
- right and left margin 50px
- bottom margin 75px
- margin:25px 50px;
- top and bottom margin 25px
- right and left margin 50px
- margin:25px;
- all four margin 25px
Using the default margin values you can center the block horizontally.
