Indents in HTML CSS. CSS indentation: Content positioning

It happens that when creating an item or layout, we need to create an indent horizontal, so that it was relative to each other. It can be like blocks or various elements, or rather, it is to make a distance that it is originally specified between the blocks located horizontally. There are different ways to create indents on the design elements. However, for compatibility with multiple modern browsers here we will touch on an up-to-date topic on the retrace as text or block on the page.

The property determines how much horizontal text space should be transferred before the first row of the text element. The interval is calculated from the element initial from the edge and the block level container.

Since most of the web page content is represented as a text, the ability to stylize this text is both attractive and efficient, it is an important skill that can become a web designer. To create an indent description and paragraph, the most commonly used and recommended method will use CSS. Here you will be provided with various examples of how CSS can be used for text and an indent element.

Set an external indent from above on CSS

To create upper indents, it is definitely without CSS properties can not do, because we need margin-top, this value can be specified differently as in PX and standard on pixels, em,% and so on, that everything happens in CSS Stylistics in units Measurement.

Example of use:

Margin-Block (
margin-top: 50px;
}

What can I look at the image:

You can also use it to raise blocks, here you can use a property called margin-left. also margin-Right and margin-Bottom. Where we simply specify the Margin property, where it is possible to initially set 4 parameters, here we will look clockwise for the concept where we start from the upper side with a continuation of each side.

margin: 20px 50px 30px 50px;

That's how it will work margin.: from above to the right from the bottom left:

There is also an internal indent from above on CSS

It happens that it is necessary to align the content of the vertical content, this is relative to the parent block, there is an opportunity to use other properties as Padding-TOP, which makes, and more precisely by default sets the internal indent to up. If we talk about similar properties, which can also be prescribed and set on analogue, then Margin goes here in PX, EM,% and other units.

Example:

Padding-block (
Padding-TOP: 47px;
}

We look at the example:

Now you can consider analog property margin. and paddingwhich is involved in the task of indents from other sides of the block element, but already comes separately: padding-Left., padding-Right, padding-Bottom. Where you can immediately ask the distance you need only for all sides, and everything will be at the same time.

padding: 10px 20px 40px 50px;

Here initially you can set the value as for margin. Starting as you understand from above, but then everything goes clockwise, it's up to the right, from the bottom, on the left, and so on.

Now depending on the different situation, you have the opportunity to make indents from above on CSS styles, where we use the properties margin. and paddingIt is possible to set the necessary items on the page of your Internet resource, as you have thought and you need to do.

Description

Sets the magnitude of the retreat from the right edge of the element. An indentation is the distance from the outer edge of the right limit of the current element to the inner boundary of its parent element (Fig. 1).

Syntax

margin-Right: Value | AUTO | inherit.

Values

The value of the right retirement can be indicated in pixels (PX), percent (%) or other permissible units for CSS. The value can be both positive and negative.

AUTO indicates that the size of the indents will be automatically calculated by the browser. Inherit inherits parent value.

HTML5 CSS2.1 IE CR OP SA FX

The result of this example is shown in Fig. 2.

Fig. 2. Application of the MARGIN-RIGHT property

Object model

document.getelementByid ("Elementid") .style.marginright

Browsers

Internet Explorer 6 browser doubles the value of the left or right indent for floating elements invested in parent elements. Dwinkles that indent, which is adjacent to the side of the parent. The problem is usually solved by adding Display: inline for a floating element.

Internet Explorer before version 7.0 does not support the INHERIT value.

Greetings to my blog. CSS (Cascade Style Tables) provides many opportunities to configure the appearance of web pages. Today I would like to shortly show how to determine in CSS an indentation from above or on any other side for any element.

External indent

External indent is set using the MARGIN property. With it, you can set indents at once from all four sides, or use other properties: margin-top, Margin-Left, Margin-Right, Margin-Bottom, which allow you to make it only on the one hand.

External indent determines the distance to which the selected edge of the element will be moved away from other elements on the page. For example, write:

P, DIV (
Margin-top: 20px;
}

This means that all blocks and paragraphs will receive an indent to the top of 20 pixels, that is, their upper edge will be moved away from the elements adjacent to it.

The indents can be recorded on each side only with the same MARGIN property, which records 4 values \u200b\u200bin a row:

DIV (
Margin: 20px 10px 20px 10px;
}

Indents will be given from the upper, right, lower and left edges, respectively. Since in this case they are equal from the opposite sides, then it would be possible to write like this:

DIV (
Margin: 20px 10px;
}

The first value is the indentation from above and below, and the second - on the sides.

Internal indent

Internal indent works differently - it does not move the block from other elements, and adds this distance inside the element, moving the contents (content) of the block from its edges. It's comfortable. Where did you see the site on which the text begins in the right upper edge of the window?

I have not seen this because web developers always apply external and internal indents so that the text is read as convenient as possible. Internal indents are written using the Padding property, in which 4 values \u200b\u200bcan be transferred to all edges to all edges, respectively.

Also similar to Margin can add the title side and set the distance only for it. For example, the indentation from above can be written using Padding-TOP. In general, the Padding property works absolutely similarly to the Margin property.

For example, you can cite such a piece of code:

Block (
Width: 200px;
Padding: 20px;
}

What do you think will be the real width of our element? It shows that it is 200 pixels, but Paddings are added on the sides on each side for another 20, total 240 pixels. Consider this when layout.

It would also like to note that Padding is normally set only by block elements, it is better not to give it. Margin normally works with any elements.

Today we will talk to you a little about the principles of layout, namely, about the ways of organizing an indent on your site in certain elements.

As the element under consideration, which needs to make an indent, there may be text, image, table, or any other HTML element. The main thing is to follow some important rules that I will tell now.

If you are just creating your site, I recommend you at the top of your main style file insert the following properties:

* (-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 do you need it, you ask? I answer your question with a visual example.

Suppose you have such a layout element:

This will look like an option without using the properties described above (upper element) and with their use (bottom item):

What is seen here? That the width of the element in the first version (without the use of properties) has become more indicated by the added indentation, which is not entirely convenient and correct in terms of layout.

The option with the properties is much more aesthetically, but to use it is consciously, because when adding them to the ready-made website, you risk getting a driving design and "headache" in the form of bringing everything in due topic. All projects that I happened from scratch did not cost without these properties.

And now, in fact, let's talk about the options for organizing indents from items on your site with visual examples.

Internal indent with CSS Properties "Padding"

So that you understand the whole logic of things, take the following fragment of the layout for example:

with your styles:

Test_DIV (Width: 250px; Border: 1px Solid;)

The visual version is obtained:

What is the property " padding"? It helps to organize an internal indent in the specified elements. Add to our layout an internal indent equal to 10px:

Test_DIV (Width: 250px; Border: 1px Solid; padding: 10px; // Internal indent 10px)

Visually it turns out like this:

The number 10 in the property suggests that inside the specified elements with each of their four sides it is necessary to add an indent equal to 10px. Pixels (PX) can be replaced by interest or other value supported in CSS.

There are two options. Indications of the Parties with which it is necessary to make indents.

First - This is clearly indicating the parties:

Padding-TOP: 10px; // Internal indent 10px from above Padding-Right: 10px; // Internal indent 10px Right Padding-Bottom: 10px; // Internal indent 10px bottom Padding-left: 10px; // Internal indent 10px left

In this case, each part uses its property. AND second:

Padding: 10px 0 0 0; // Internal indent 10px from above, everything else - 0PX Padding: 10px 0; // Internal indent 10px on top and bottom, and on sides - 0px Padding: 0 10px; // Internal indent 0px from above and down, and on sides - 10px

There is a simple listing of values, each of which corresponds to its side. The parties are set: The first value is the top, the second - the right, the third is the bottom and fourth - the left, that is, everything is clockwise.

If the values \u200b\u200bare two (top and right), it means that the mirror of the same values \u200b\u200bgo down and left and only so. It seems everything is clear. If for some of the sides you do not need to ask an indent - the value for this side is set "0". I like this option more, as it is more compact, but in my undertakings I used exactly the first option.

This type of indentation is well suited for splitting text, content of tables and other text information. To separate the elements themselves similar to the fact that in the example above, there is another property.

External indent with the help of CSS properties "Margin"

Distinctive feature of the property " margin."- This is what an indent is added outside the element, that is, external.

Options for adding here are also two.

First - with a clear indication of the parties:

Margin-top: 10px; // External indent 10px from above Margin-Right: 10px; // External indent 10px on the right of Margin-Bottom: 10px; // External indent 10px from below Margin-left: 10px; // External indent 10px left

Second - with the listing of values, each of which corresponds to its side:

Margin: 10px 0 0 0; // External indent 10px from above, everything else - 0px margin: 10px 0; // External indent 10px on top and bottom, and on sides - 0px margin: 0 10px; // External indent 0px from above and down, and on sides - 10px

Here, I will not describe all the nuances of working with the rules, everything is the same as about the property padding"It is written above.

Use Margin with the following value:

Test_DIV (Width: 250px; Border: 1px Solid; Margin: 10px; // External indent 10px)

Visually it will look like this:

As can be seen from the example, in this case an external indent is added, separating the specified elements among themselves.

Important feature: If you carefully looked at the result, it could notice that the adjacent indents from the elements are not summed up. That is, if the first element has an external bottom indent, equal to 10px, and the second is an external upper indent with 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 option of indents is often used in the text, namely in the design of paragraphs, as well as in the elements that have visible borders.

But both properties are not limited to these elements. You choose the options for their use yourself, I only tried to present you the foundation for them.

Hello! Initially, I wanted to divide this article on 4 small, but then thought. What for? After all, it is more convenient when such information is collected within a single material.

Therefore, today we will learn how to make CSS indent to the left and from all other parties - on the right, on top and bottom. They can be done for pictures and texts. They are two species:

• External;
• Internal.

For the first, the MARGIN key property is used, for the second - padding. For clarity, I made a small example for you. To visually it was convenient to distinguish between the internal and external space added a visible table. Looking what happened?

External indents

Speaking them in the CSS styles file, it will be possible to specify the orientation of the information block on the page. For example, shifted it left and down. Let's immediately demonstrate how it will look like.

In general, it is possible to apply the following options for setting indents.

Left (margin-left).

Right (margin-right).

From above (margin-top).

From below (margin-bottom).

Now I will show 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 is more compact. Also note that indents are set clockwise. It all starts on top and ends on the left.

Internal indents

The procedure for action here is similar. Only now add new properties not for the entire table, but for the contents of columns.

We look at what happened.

By analogy with internal returns to CSS, external can be prescribed by the abbreviated code or for parties separately.

These were the highlights. Finally, I will show how you can easily facilitate some work.

Indents at the level of selected tags

In cases that looked above, they are set for text and pictures at the same time. In fact, you can specify the distance to the elements at the level of a specific tag. I will show how it works. I cancel the latest changes and indicate a special code in the style file.

Looking what happened after saving changes.

The picture remained in place, only the text concluded in the left was shifted to. Similar manipulations can be applied to other blocks, for example, TR, SPAN.

As additional information, I propose to familiarize the publication about the task. There are also described quite interesting ways. It can be useful for the formation of a red string in text or other actions.

Additionally, there is a subscription to the free newsletter on email addresses. For a blog subscription there is a special form. Up to communication.