Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to set up margin-right in css". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to set up margin-right in css.

In css, margin-right means "right margin" and is an outer margin attribute used to set the right position distance of an element. Its value is allowed to be negative, and the syntax is "margin-right: margin value;"; the margin value can be set to the keyword "auto", a relative value of a percentage, or a fixed margin value.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, margin-right means "right margin" and is an outer margin attribute used to set the distance to the right of an element.

The margin-right attribute sets the right margin of the element, and the attribute value can be negative. If we need to set the left and right margins of the element at the same time, we can use the margin attribute to set it.

Margin-right attribute syntax format:

Margin-right:auto | length |% value describes the right margin set by the auto browser. Length defines a fixed right margin. The default value is 0. % defines a percentage of the right margin based on the total width of the parent object.

Example 1: relative value of percentage

Set the right margin of a p element to 50% of the width of the container

P.ex1 {margin-right: 50%}

A paragraph that does not specify the margin size. A paragraph that does not specify the margin size. A paragraph that does not specify the margin size.

A paragraph with a right margin of 50% of the width of the container. A paragraph with a right margin of 50% of the width of the container. A paragraph with a right margin of 50% of the width of the container. A paragraph with a right margin of 50% of the width of the container. A paragraph with a right margin of 50% of the width of the container.

Example 2: set a fixed value

Set the right margin of a p element to 50px

P.ex1 {margin-right: 50px;}

A paragraph that does not specify the margin size. A paragraph that does not specify the margin size. A paragraph that does not specify the margin size.

A paragraph with a right margin of 50px. A paragraph with a right margin of 50px. A paragraph with a right margin of 50px. A paragraph with a right margin of 50px. A paragraph with a right margin of 50px.

Extended knowledge: negative value of margin

Negative margins, that is, setting the value of the margin property to a negative value, is a useful technique in CSS layouts. Scenarios with positive values are common, and everyone is familiar with their performance.

When margin-top and margin-left are negative, the element will be moved up and left, and the position in the document stream will also change accordingly, which is different from the position:relative element which still occupies the original position after setting top and left.

When margin-bottom and margin-right are set to negative values, the position of the element itself does not change, and the subsequent elements will move down and to the right.

Everything you encounter should be included here:

Block-level elements will shift when margin-top margin-bottom is set, but if margin-bottom is set, it is the element behind it that will shift.

Setting margin-top margin-bottom for inline elements will not cause displacement. Add absolute positioning (making it detached from document flow, such as floating fixed positioning), and setting margin-top will result in displacement. If you change the setting of vertical-align (middle top), the setting of inline block elements margin-top margin-bottom can occur displacement.

Both margin-left block-level elements and inline elements will shift, except that the content after the block-level element will not shift, and the content after the inline element will shift (because the content after the inline element is on the same line as it).

If the block-level element is set to margin-right, the width of itself will increase; if the inline element is set to margin-right, the inline element after the element will shift according to the numerical value.

Note: factors affecting the display effect of margin: display positioning mechanism verticle-align

At this point, I believe you have a deeper understanding of "how to set up margin-right in css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.