To display elements on a web page more beautifully, external and internal margins are used in CSS, and we will now look at this using examples.
Each element, be it a paragraph, a div, an image or a video, is a block that can be indented both inside using the padding property and outside using margin .
In CSS these properties for indentation are written in this way (a paragraph is taken as an example):
Instead of the P tag, you will write your own element, of course, for which indentation will be applied.
It is imperative to understand and remember that for the margin and padding parameters, the construction of indents for each side is the same.
That is, we have 4 values in each indent:
Indent values.
- First value: top padding;
- Second meaning: right indentation;
- Third meaning: bottom indent;
- Fourth meaning: left indent.
In this example, I made the margin outer indent in css in this way: I wrote 20px on top, 10px on the left and right (usually they are set the same for symmetry), and 30px on the bottom.
And for the padding I specified: 10px on top, left and right, and 14px on the bottom.
The value for indents in the margin and padding properties can be reduced, provided that they are of the same size.
From my example, the abbreviated notation will look like this:
That is, when the last numeric entry is missing, in this case for the left indent, the browser automatically substitutes the same value for the left indent as the value on the right.
And in my case, the margins on the right and left will be 10px in both margin and padding.
And if you have the same values for the margins at the top and bottom (for example: 16px), and also the same values for the margins on the left and right (for example: 20px), then the entry will have an even more abbreviated form:
Accordingly, for the internal indentation, the css entry is made identical to this one.
Application of single indents: for each side separately.
The following single-value properties are used to specify an individual indent:
Indent properties for each side.
- margin-top: 3px; outer top margin;
- margin-left: 4px; outer-left margin;
- margin-right: 6px; outer right margin;
- margin-bottom: 10px; outer bottom margin.
Entries for internal indents are written in the same way, only you need to replace margin with padding.
For example, for all img images you already have all the indents written in CSS.
That is (to clarify) the external margin has the following values: 10px on top, 20px on left and right, and 14px on bottom.
And the internal padding is 6px on all 4 sides.
Let's say you decide to put another picture on the page, but for it you want to change only the outer margin at the top, and leave the rest as is. And to complete this task, it is enough to register a class for this image and add an additional entry to the css.
As a result, the image you added with the verx class will accept all the padding specified in the css for the img tag, and will only change the outer padding for the top side (in our case: 40px).
I tried to make the description for css indents more detailed, but if you have any questions, ask them through the comments.
Today we will talk to you a little about the principles of layout, namely, about ways to organize indentation on your site for certain elements.
The element in question that needs to be indented could be text, an image, a table, or any other HTML element. The main thing is to follow some important rules, which I will tell you about now.
If you are just creating your site, then I recommend that you insert the following properties at the top of your main style file:
* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:before, *:after ( -webkit-box-sizing: border- box; -moz-box-sizing: border-box; box-sizing: border-box )
Why is this necessary, you ask? I answer your question with a clear example.
Let's say you have a layout element like this:
This is what the option will look like without using the properties described above (top element) and with their use (bottom element):
What can you see here? That the width of the element in the first version (without using properties) became larger than specified due to the added indents, which is not entirely convenient and correct in terms of layout.
The option with properties is much more aesthetically pleasing, but you should use it consciously, because when you add them to a ready-made site, you risk getting a bad design and a “headache” in the form of bringing it all into proper form. All the projects that I had the opportunity to lead from scratch were not without these properties.
And now, in fact, let’s talk about options for organizing indents for elements on your website with visual examples.
Padding using the CSS “padding” property
So that you understand the whole logic of things, let’s take as an example the following fragment of the layout:
with your own styles:
Test_div ( width: 250px; border: 1px solid; )
The visual version looks like this:
What is the property " padding"? It helps to organize the internal indentation in the specified elements. Let's add an internal padding of 10px to our layout:
Test_div ( width: 250px; border: 1px solid; padding: 10px; // Padding 10px )
Visually it looks like this:
The number 10 in the property means that inside the specified elements, on each of their four sides, you need to add a margin of 10px. Pixels (px) can be replaced with percentages or other CSS supported values.
There are two options indications of the sides from which indentations must be made.
First- this is with an explicit indication of the parties:
Padding-top: 10px; // Internal padding 10px on top padding-right: 10px; // 10px padding on the right padding-bottom: 10px; // Internal padding 10px from the bottom padding-left: 10px; // 10px left padding
In this case, each side uses its own property. AND second:
Padding: 10px 0 0 0; // Internal padding 10px on top, everything else - 0px padding: 10px 0; // Internal padding 10px on top and bottom, and on the sides - 0px padding: 0 10px; // Internal padding 0px top and bottom, and 10px on the sides
Here is a simple listing of values, each of which corresponds to its side. The sides are set like this: the first value is top, the second is right, the third is bottom and the fourth is left, that is, everything is clockwise.
If there are two values (top and right), then this means that in mirror the same values go down and to the left, and that’s the only way. Everything seems to be clear. If you do not need to set an indent for one of the sides, set the value for this side to “0”. I like this option better, since it is more compact, but in my endeavors I used the first option.
This type of indentation is good for separating text, table cell content, and other text information. To separate the elements themselves, similar to those in the example above, there is another property.
Margin using the CSS property “margin”
Distinctive feature of the property " margin" means that the indentation is added outside the element, that is, external.
There are also two options for adding here.
First– with an explicit indication of the party:
Margin-top: 10px; // 10px margin on top margin-right: 10px; // 10px margin on the right margin-bottom: 10px; // Margin 10px from bottom margin-left: 10px; // 10px left margin
Second– with a list of values, each of which corresponds to its side:
Margin: 10px 0 0 0; // Outer margin 10px on top, everything else - 0px margin: 10px 0; // Margin 10px on top and bottom, and on the sides - 0px margin: 0 10px; // Outer padding 0px top and bottom, and 10px on the sides
I won’t describe all the nuances of working with the rules here, everything is the same as about the property “ padding", written about him above.
We use margin with the following value:
Test_div ( width: 250px; border: 1px solid; margin: 10px; // Margin 10px )
Visually it will look like this:
As can be seen from the example, in this case, an external margin is added to separate the specified elements.
Important Feature: If you looked closely at the result, you might have noticed that adjacent indents of elements do not add up. That is, if the first element has a bottom margin of 10px, and the second element has a top margin of the same value, then the total distance between them will also be 10px. If 10 and 15 respectively, then the total is 15 and so on.
This indentation option is often used in text, namely in the design of paragraphs, as well as in elements that have visible borders.
But both properties are not limited to just these elements. You choose the options for using them yourself, I just tried to give you the basics about them.
Welcome to my blog. Css (Cascading Style Sheets) provides many options for customizing the appearance of web pages. Today I would like to briefly show how to define in CSS the padding on the top or on any other side for any element.
Margin
The margin is set using the margin property. With it, you can set margins on all four sides at once, or use other properties: margin-top, margin-left, margin-right, margin-bottom, which allow you to create it on only one side.
The margin determines the distance that the selected edge of an element will be offset from other elements on the page. For example, the entry:
P,div(
Margin-top: 20px;
}
This means that all blocks and paragraphs will be indented at the top by 20 pixels, that is, their top edge will be moved away from the elements adjacent to it by this distance.
Margins can be written on each side using only one margin property, to which 4 values are written in a row:
Div(
Margin: 20px 10px 20px 10px;
}
The padding will be given from the top, right, bottom and left edges respectively. Since in this case they are equal on opposite sides, we could also write it like this:
Div(
Margin: 20px 10px;
}
The first value is the margin at the top and bottom, and the second is the margin at the sides.
Indentation
Inner padding works differently - it doesn't move the block away from other elements, but adds that space inside the element, moving the content of the block away from its edges. It's comfortable. Where have you seen a website where the text starts at the very top left of the window?
I have not seen this, because web developers always use external and internal indents to make the text as easy to read as possible. Internal padding is specified using the padding property, in which 4 values can be listed at once, separated by a space, for all edges, respectively.
Also, similarly to margin, you can add the name of the side and set the distance only for it. For example, top padding can be written using padding-top . In general, the padding property works exactly the same as the margin property.
For example, you can give this piece of code:
Block(
Width: 200px;
Padding: 20px;
}
What do you think the actual width of our element will be? Here you can see that it is 200 pixels, but the paddings add another 20 on each side, for a total of 240 pixels. Take this into account when designing.
I would also like to note that padding is normally specified only for block elements; it is better not to give it to inline elements. Margin works fine with any elements.
Hello, dear readers of the blog site! Today we will continue learning about Cascading Style Sheets or CSS. In previous articles, we have already examined in general terms the block layout of the site. As a result, we began to have quite professional web pages, but they were missing something. But they most likely lack indents and frames. Today we will look at the style rules of margin, padding and border, which allow you to set indents and frames for html elements.
CSS Padding Options
With the help of cascading style sheets, it is possible to set two types of indents.
1.Indentation is the distance from the imaginary border of the element to its content. The distance value is specified using the parameter padding. This indentation belongs to the element itself and is located inside it.
2. Margin— the distance between the border of the current element of the web page and the borders of neighboring elements or the parent element. The size of the distance is controlled by the property margin. This indentation is located outside the element.
For clarity, picture:
For example, consider a cell filled with text. Then the padding is the distance between the imaginary border of the cell and the text it contains. And the outer margin is the distance between the borders of adjacent cells. Let's start with padding.
Padding in CSS using padding (top, bottom, left, right)
The padding-left, padding-top, padding-right and padding-bottom style properties allow you to set the padding values, respectively, on the left, top, right and bottom of a web page element:
padding-top | padding-right | padding-bottom | padding-left: value | interest | inherit
The amount of indentation can be specified in pixels (px), percentage (%) or other units acceptable for CSS. When specifying percentages, the value is calculated from the width of the element. The inherit value indicates that it is inherited from the parent.
For example, for the current paragraph, I applied a style rule that sets the left padding to 20 pixels, the top padding to 5 pixels, the right padding to 35 pixels, and the bottom padding to 10 pixels. The rule entry will look like this:
p.test(
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}
Composite padding rule allows you to specify indents on all sides of a web page element at once:
padding:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
A prefab rule allows one, two, three, or four values to be used, separated by a space. In this case, the effect depends on the number of values:
- if you specify one value, it will set the amount of indentation on all sides of the page element;
- if you specify two values, the first will set the amount of indentation at the top and bottom, and the second - at the left and right;
- if you specify three values, then the first will determine the amount of indentation at the top, the second - on the left and right, and the third - on the bottom;
- if four values are specified, the first will set the amount of indentation at the top, the second at the right, the third at the bottom, and the fourth at the left.
Thus, the CSS rule above can be shortened as much as possible and written as follows:
p.test( padding:5px 35px 10px 20px)
The margin property or margins in CSS
The margin-left, margin-top, margin-right and margin-bottom style attributes allow you to set the margin values, respectively, left, top, right and bottom:
margin-top | margin-right | margin-bottom | margin-left:<значение>|auto|inherit
As mentioned above, the margin is the distance from the border of the current element to the border of the adjacent element, or, if there are no neighboring elements, to the internal border of the parent container.
The amount of indentation can be specified in pixels (px), percentage (%) or other units allowed for CSS:
p(
margin-left: 20px;
}
h1(
margin-right:15%;
}
The value auto means that the indent size will be automatically calculated by the browser. If you use percentage notation, the indentations are calculated depending on width of the parent container. Moreover, this applies not only to margin-left and margin-right, but also for margin-top and margin-bottom, percentage margins will be calculated depending on the width, not the height, of the container.
It is permissible to use as values of external indents negative values:
p(
margin-left:-20px;
}
If, with positive values of indentation, neighboring elements are moved away, then with a negative value, the neighboring block will collide with the element for which we have set such a negative indentation.
We can also specify padding using the style attribute margin. It sets the indentation values simultaneously on all sides of a web page element:
margin:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
When specifying one, two, three or four padding values, this property obeys the same laws as the padding rule.
Border Options Using the Border Property
When setting frames, there are three types of parameters:
- border-width — border thickness;
- border-color — border color;
- border-style — the type of line with which the frame will be drawn.
Let's start with the frame thickness parameter:
border-width: [value | thin | medium | thick] (1,4) | inherit
Frame thickness can be specified in pixels or other units available in CSS. The variables thin, medium and thick set the border thickness to 2, 4 and 6 pixels, respectively:
border-width:medium;
As with the padding and margin properties, the border-width parameter allows one, two, three, or four values, thus setting the width of the border for all sides at once or for each side separately:
border-width: 5px 3px 5px 3px
For the current paragraph, make the thickness of the top border 1px, right 2px, bottom 3px, and left 4px using the rule (border-width: 1px 2px 3px 4px;)
Using the style attributes border-left-width, border-top-width, border-right-width and border-bottom-width, you can set the thickness of the left, top, right and bottom sides of the border, respectively:
border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick|<толщина>|inherit
The next parameter is border-color with which you can control frame color:
border-color: [color | transparent] (1,4) | inherit
The property allows you to set the border color for all sides of the element at once or only for the specified ones. As a value, you can use the methods used for specifying colors in HTML: hexadecimal code, keywords, etc.:
p (border-width: 2px; border-color: red)
The value transparent sets the transparent border color, and inherit inherits the value of the parent. By default, if the border color is not specified, the one used for the font inside the element will be used.
Using the style attributes border-left-color, border-top-color, border-right-color and border-bottom-color, you can set the color of the left, top, right and bottom sides of the border, respectively:
border-left-color|border-top-color|border-right-color|border-bottom-color: transparent|<цвет>|inherit
And the last parameter border-style specifies frame type:
border-style: (1,4) | inherit
The frame type can be specified for all sides of an element at once or only for those specified. You can use multiple keywords as values. The appearance will depend on the browser used and the thickness of the frame. Meaning none is used by default and does not display the frame and its thickness is set to zero. The hidden value has the same effect. The resulting frame for other values, depending on the thickness, is shown in the table below:
The style attributes border-left-style, border-top-style, border-right-style and border-bottom-style specify the style of the lines that will be drawn on the left, top, right and bottom sides of the border, respectively:
border-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
As with the padding and padding options, there are generic border property. It allows you to simultaneously set the thickness, style and color of the border around an element:
border: | inherit
The values can be in any order, separated by spaces:
td (border: 1px solid yellow)
To set a border only on certain sides of an element, there are the border-top, border-bottom, border-left, border-right properties, which allow you to set parameters for the top, bottom, left and right sides of the frames, respectively.
All that remains is to summarize:
- for the task padding we use the property padding;
- for settings margins there is a rule margin;
- frame parameters are specified using the attribute border.
I note that all these CSS properties increase the size of the web page element. Therefore, if we change the thickness of the border or the size of the padding of the block containers that form the design of the web page, we will have to change the size of these containers accordingly, otherwise they may move and the design will be broken.
That's all, see you next time!
Block layout is often used when creating a website or blog. As a consequence of this, it is often necessary to indent blocks. For this reason, about how to indent in CSS described in detail in this lesson. To the browser, each tag is a container that has content, padding, outer margins, and a border. In this lesson we will learn how to make internal and external indents, and consider their main parameters.
The figure below clearly shows the block indent parameters:
As you can see, indents can be made in four directions: top indent (top), bottom indent (bottom), left indent (left) and right indent (right). Units of measurement can be pixels, percentages, and other CSS units - learn more about them. This tutorial uses pixels.
Block padding
The property responsible for padding in CSS is padding. So, let's look at an example of setting internal padding for a block:
padding-top: 5px; /*top padding*/ padding-left: 8px; /*left padding*/ padding-right: 8px; /*right padding*/ padding-bottom: 5px; /*bottom padding*/
In this example, padding is set separately for each side of the block. In addition, there are several ways to set indentation in CSS:
margin: 5px 8px 5px 8px; /*top, right, bottom, left margins*/ margin: 5px 8px 5px; /*describes the top, left, right, bottom margins*/ margin: 5px 8px; /*describes the top and bottom, right and left margins*/ margin: 7px; /*describes all internal paddings of 7px*/
It's easier to remember the first and last methods. In the first case, the indents are placed clockwise (top, right, bottom, left) - we can specify any amount of indentation; in the latter case, the indents on all sides will be the same.
Block margins
The property responsible for margins in CSS is margin. Examples of margins in CSS:
margin-top: 5px; /*top margin*/ margin-left: 10px; /*left margin*/ margin-right: 10px; /*right margin*/ margin-bottom: 5px; /*bottom margin*/
padding: 5px 10px 5px 10px; /*top, right, bottom, left margins*/ padding: 5px 10px 5px; /*describes the top, left and right, bottom padding*/ padding: 5px 10px; /*describes the top and bottom, right and left padding*/ padding: 7px; /*describes all 7px margins*/
Thus, how to indent in CSS- the question is not difficult, but very relevant. To better understand the information described above, you should remember that there are two properties: padding - internal indents and margin - external indents. Also, as you already know, there are several ways to set indents, you can use them.
Loading...
