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 margins 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.
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 its help, 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 make it only on 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 given only to block elements; it is better not to give it to inline elements. Margin works fine with any elements.
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: indent right;
- 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 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 inner padding css entry done identically 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.
Hello! Initially I wanted to divide this article into 4 small ones, but then I thought about it. For what? After all, it is more convenient when such information is collected within one material.
So today we'll learn how to make CSS indentation on the left and all other sides - right, top and bottom. They can be made for pictures and texts. They come in two types:
- External;
- Internal.
For the former, the key property is margin, for the latter – padding. For clarity, I made a small example for you. To make it visually convenient to distinguish between internal and external space, I added a visible table. Let's see what happened?
Margins
By registering them in a file CSS styles, you can set the orientation of the information block on the page. For example, I'll move it to the left and down. Let me immediately demonstrate what it will look like.
In general, you can use the following options to set indents.
Left (margin-left).
On the right (margin-right).
Top (margin-top).
Bottom (margin-bottom).
Now I’ll show you another cool nuance.
As you can see, you can use one of the options - the effect is the same. Only in the second case the code turns out to be more compact. Also note that the indents are set clockwise. Everything starts at the top and ends at the left.
Padding
The procedure is similar here. Only now I’ll add new properties not for the entire table, but for the contents of the columns.
Let's see what came of it.
By analogy with indentation V CSS external can be written in an abbreviated code or for the parties separately.
These were the main points. Finally, I’ll show you how else you can make some work easier.
Indentation at the selected tag level
In the cases seen above, they are set for text and images at the same time. In fact, you can set the distance to elements at the level of a specific tag. I'll show you how it works. I cancel last changes and specify special code in the style file.
Let's take a look at what happened after saving the changes.
The picture remained in place, only the text enclosed in the . moved to the left. Similar manipulations can be applied to other blocks, for example, tr, span.
As additional information I suggest you read the publication about the task. There are also sufficiently described interesting ways. Can be useful for forming a red line in the text or performing other actions.
Additionally, a subscription to free newsletter information on email addresses. There is a special form for subscribing to the blog. See you later.
With the advent of CSS indent management properties, web developers have enormous opportunities to manage the interface and design of website pages. Previously, indentations were managed using tables, which was much more complex and voluminous.
Let's look at the basic properties of absence management.
Managing margins in HTML using CSS using the margin property
css property margin allows you to control exactly external margins. Let's say there is an image for which you need to specify external margins: 30 pixels on top, 20 on the left, 10 on the right and 5 on the bottom.
To set the margin at the top we will write: margin-top: 30px
To set the left margin: margin-left: 30px
Right margin: margin-right: 10px
And bottom: margin-bottom: 5px
You can combine everything by writing the following: margin: 30px 10px 5px 20px;
For example, let's set these paddings for an image. We get the following html code:
You can see how the image has shifted relative to the parent element.
If you specify margin: 30px, then css padding will be the same on all four sides and will be equal to 30 pixels.
Eat options instructions two and three values in the specification: margin:10px 20px;. This parameter will make sure that the external margins on the css appear at the top and bottom 10px, left and right 20px;
Often for beginning layout designers it is not always possible to immediately remember all possible combinations, so initial stages you can use the following parameters: margin-top, margin-right, margin-left and margin-bottom. Top - up, right-right, left-left, bottom-bottom.
