Arrangement of margins and padding in CSS. Controlling indentation in html on css div external indents

For a more beautiful display of elements on a web page, external and internal indents in css are used, and we will now analyze this with examples.

Every element, be it a paragraph, div, picture or video, is a block in which you can indent both inside with the padding property and outside with the margin.

In css, these properties are written for indentation in this way (for example, a paragraph is taken):

Instead of the P tag, you write your element, of course, for which the indentation will be applied.

It is imperative to understand and remember that for margin parameters and padding construction of indents for each side is the same.
That is, we have 4 values ​​in each indentation:

Indent values.

• First meaning: top indent;
• Second meaning: indent to the right;
• Third meaning: bottom margin;
• Fourth meaning: left indent.

In this example, I made a margin of the outer padding in css in this way: I wrote 20px on top, 10px on the left and right (as a rule, they are written the same for symmetry), and at the bottom I indicated 30px.

And for the padding of the inner padding, I specified: 10px at the top, left and right, and 14px at the bottom.

The value for the padding in the margin and padding properties can be reduced, provided they are of the same size.
From my example, the abbreviated notation will already 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 indents on the right and left will be 10px each, which is in margin, which is in padding.

And if you have the same values ​​for the outer margins at the top and bottom (for example: 16px), and the same values ​​for the outer margins on the left and right (for example: 20px), then the record will have an even more abbreviated form:

Accordingly, for the inner css indentation, the entry is identical to this one.

Applying single indents: for each side separately.

The following single-valued properties apply to specify a separate indentation:

Padding properties for each side.

• margin-top: 3px; outer top padding;
• margin-left: 4px; outer left padding;
• margin-right: 6px; outer right margin;
• margin-bottom: 10px; outer bottom padding.

In the same way, the entries are written for the internal indents, only you need to replace the margin with padding.

For example, you already have all indents in css for all img images.

That is (for clarity) the outer padding has the following values: top 10px, left and right: 20px each, and bottom 14px.
And the padding is 6px on all 4 sides.

Let's say you decided to put another picture on the page, but for it you only want to change the outer margin at the top, and leave the rest as is. And to accomplish this task, it is enough to write a class for this picture, and add an additional entry to the css.

As a result, the image you added with the verx class will accept all the indentation specified in the css for the img tag, and will only change the margin for the top side (in our case: 40px).

I tried to make the description for css indentation more detailed, but if you have any questions, ask them through the comments.

Description

Sets the amount of padding from the right edge of the element. The padding is the distance from the outer edge of the current item's right border to inner border its parent element (fig. 1).

Syntax

margin-right: value | auto | inherit

The values

The amount of the right padding can be specified in pixels (px), percent (%) or other units acceptable for CSS. The value can be either positive or negative.

Auto Indicates that the size of the indents will be automatically calculated by the browser. inherit Inherits the value from the parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Rice. 2. Applying the margin-right property

Object Model

document.getElementById ("elementID") .style.marginRight

Browsers

Browser Internet Explorer 6 doubles the left or right padding value for floated elements nested within parent elements. The padding that is adjacent to the parent's side is doubled. The problem is usually solved by adding display: inline to the floated element.

Internet Explorer up to and including version 7.0 does not support the inherit value.

It happens that when creating an element or layout, we need to create a horizontal indent so that it is relative to each other. It can be as blocks or various elements, or rather, it is to make the distance so that it was initially set between the blocks located in the horizontal view. Exists different ways on creating indents on design elements. However, for compatibility with multiple modern browsers here we will touch on current topic by indentation as text or block on the page.

The property determines how much horizontal text space to wrap before the start of the first line of the text element. The spacing is calculated from the start from the edge of the element and the container for the block level.

Since most of the content of a web page is presented in the form of text, the ability to style that text both attractive and effective is an important skill that can become a web designer. The most commonly used and recommended method for indenting the description and paragraph is to use CSS. Here you will be provided various examples of how CSS can be used for text and indentation element.

Set top margin in CSS

To create top margins, we certainly cannot do without CSS properties, therefore we need margin-top, this value can be set in different ways, both in px and standardly on pixels, em,% and so on, that everything happens in CSS stylistics in units of measurement.

Usage example:

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

What you can look at the image:

You can also use it to drop blocks, then here you can use a property called margin-left also margin-right and margin-bottom... Where we simply indicate the margin property, where it is possible to initially set 4 parameters for it, here we will consider clockwise for the concept, where we start from the top side and continue under each side.

margin: 20px 50px 30px 50px;

This is how it will work margin: top right bottom left:

Also has padding on top in CSS

It happens that you need to align a content element vertically, this is relative to the parent block, here it is possible to use other properties, like padding-top, which does, or rather, by default, sets the padding upward. If we talk about similar properties, which can also be written and set by analogy, then here comes the margin in px, em,% and other units.

Example:

Padding-block (
padding-top: 47px;
}

Let's look at an example:

Now we can consider an analogue of the property margin and padding, which is used for setting the indents on the other sides of the block element, but already goes separately: padding-left, padding-right, padding-bottom... Where you can immediately set the distance that you need, only for all sides, and everything will be at the same time.

padding: 10px 20px 40px 50px;

Here you can initially set the value as for margin starting as you understand from above, but then everything goes clockwise, it is on the right, below, on the left, and so on.

Now, depending on the different situation, you have the opportunity to make indents on top of the CSS styles, where we use the properties margin and padding that it is possible to display the necessary elements on the page of your Internet resource, as you have conceived and you need to do.

Hello! Initially, I wanted to divide this article into 4 small ones, but then I thought about it. What for? After all, it is more convenient when such information is collected within the framework of one material.

Therefore, today we will learn how to do CSS indentation left and all other sides - right, top and bottom. They can be done for pictures and texts. They are of two types:

• External;
• Internal.

For the former, the key property margin is used, 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?

External padding

By registering them in the CSS style file, it will be possible to set the orientation of the information block on the page. For example, move it to the left and down. Let's immediately demonstrate how it will look.

In general, you can use the options below to set indents.

Left (margin-left).

Right (margin-right).

Top (margin-top).

Bottom (margin-bottom).

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

Internal padding

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

Let's see what came of it.

Similar to padding in CSS external can be written in a short code or for the parties separately.

These were the highlights. Finally, I'll show you how you can make some of the work easier.

Indentation at the level of selected tags

In the cases that we looked at 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. Cancel last changes and indicate special code in the stylesheet.

Let's take a look at what happened after saving the changes.

The picture remained in place, only the text enclosed in the left moved. Similar manipulations can be applied to other blocks, for example, tr, span.

As additional information I propose a publication about the task for review. There are also enough described interesting ways... It can be useful for forming a red line in the text or performing other actions.

Additionally, there is a subscription to the free newsletter of information on email addresses... To subscribe to the blog there is special form... Until next time.

A web resource is rated by users for its visual appeal. Therefore, even an informational text may not be read due to the fact that it is poorly formatted. Conclusion - you need to carefully and carefully approach not only the semantic content of the pages of the site, but also to its visual presentation. The advent of CSS technology has expanded the possibilities for creating engaging articles. One of the properties designed to make it easier to understand what is written is indentation. CSS text.

Margins and padding: what's the difference?

Before you start formatting text, you should understand what margins and indents are. Despite the fact that these markup elements in some cases look the same to the user, there are fundamental differences between them:

• the field is set by the property padding, indent - margin;
• the margin is determined by the gap between the content and the border of the block, the indent is between the borders of adjacent blocks;
• margins can be taken into account in the dimensions of the element (width and height), or not.

Margin property

So, to set the horizontal or vertical indentation of CSS text, use the construction margin... This property applies to the tag of the document defining the paragraph. In the simplest case, it is written as:

margin: 12px.

Such a line means that around the block of text (or any other block), an indent of 12 pixels will be made on all sides. To increase the interval, for example, three times, it is enough to write:

margin: 36px.

But what if the spacing between blocks should be different on each side? Web developers use several forms of writing:

1. margin: 11px 22px.
2. margin: 11px 22px 33px.
3. margin: 11px 22px 33px 44px.

In the first example, indents of 11 pixels will be made from the lower and upper borders of the block, and by 22 pixels from the sides of the block. According to the second form of notation, there will be 11 pixels between the top edge of the block and the content, 33 pixels between the bottom, and 22 pixels on the sides. In the third case, the padding will be 11 pixels from the top, 22 pixels from the right, 33 pixels from the bottom, and 44 pixels from the left.

It is also possible to record the distance to the block boundary on only one side: margin-top, margin-bottom, margin-left, margin-right... Having translated the names of the properties into Russian, it is easy to guess about their purpose. For example, the following entry says that the indent on the right will be 22 pixels:

margin-right: 22px.

For the rest of the sides, the distances around the block are taken equal to the value of the parent element.

Property margin has a quirk that the developer must remember when using vertical indentation of CSS text. Intervals neighboring elements are not summed up, but superimposed on each other. For example, let one of the blocks have margin-bottom: 15px, and the block adjacent to it from below margin-top: 35px... School arithmetic and common sense dictate that the total space between them will be 50 pixels. In practice, this is not the case. Block with great value properties margin Will "swallow" its neighbor. As a result, the spacing between the elements will be 35 pixels.

"Red line

Making out a document in text editor, users prefer to specify each new paragraph with a "red" line. WITH using CSS it is not difficult to indent the text to the left - the construction is used text-indent... It is written like this:

text-indent: 11px.

That is, the first line of the paragraph will be shifted relative to the left edge by 11 pixels. To make the text on the web page more like a document in the editor, you should additionally install, that is, write:

text-indent: 11px;

text-align: justify.

In addition to pixels, when describing the markup, it is allowed to use other units - inches, points, percent. Let the block have a CSS text padding of 10%. With a block width of 500 pixels, the red line will be 50 pixels (10% of 500).

This property can be set to inherit... Such an entry says that the block uses a similar property of the parent block.

text-indent: inherit.

Surprisingly, it can also take negative values! In this case, the so-called protrusions are formed, that is, the main text remains in place, and the first line is shifted to the left by 22 pixels:

text-indent: -22px.

To prevent letters from crossing the left border of the browser, in addition to text-indent you need to use the construction to set the field:

padding-left: 22px.

The main CSS properties for reviewed. Practice will help to consolidate them. Here are some final tips on how to apply this material to your website development:

• red line and text indent are different concepts, and different properties are used to indicate them;
• for vertical indents, the rules of mathematics do not apply - the intervals are superimposed, the element with a large value "wins";
• negative paragraph indentation is used to indicate the first line of a paragraph using an image.