What does margin-right mean in css?-Front-end Q&A-php.cn

What does margin-right mean in css?

青灯夜游

Release： 2022-05-18 13:56:03

Original

9056 people have browsed it

In CSS, margin-right means "right margin". It is a margin attribute used to set the right position distance of an element. Its value is allowed to be a negative number. The syntax is "margin-right" :Margin value;"; The margin value can be set to the keyword "auto", or it can be a relative value of percentage, or a fixed margin value.

What does margin-right mean in css?

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

In CSS, margin-right means "right margin", which is a margin attribute used to set the right position distance of an element.

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

margin-right attribute syntax format:

margin-right:auto|length|%

Copy after login

##auto The right margin set by the browser. Define a fixed right margin. The default value is 0. # Defines a percentage right margin based on the total width of the parent object.

value	description

length
%

Example 1: Relative value of percentage

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

<html>
	<head>
		<meta charset="utf-8">
		<style>
			p.ex1 {
				margin-right: 50%
			}
		</style>
	</head>

	<body>

		<p>一个没有指定边距大小的段落。一个没有指定边距大小的段落。一个没有指定边距大小的段落。</p>
		<p class="ex1">一个右边距为容器宽度的 50%的段落。一个右边距为容器宽度的 50%的段落。一个右边距为容器宽度的 50%的段落。一个右边距为容器宽度的 50%的段落。一个右边距为容器宽度的 50%的段落。</p>

	</body>
</html>

Copy after login

What does margin-right mean in css?

Example 2: Set a fixed value

Set the right margin of a p element to 50px

<html>
	<head>
		<meta charset="utf-8">
		<style>
			p.ex1 {
				margin-right: 50px;
			}
		</style>
	</head>

	<body>

		<p>一个没有指定边距大小的段落。一个没有指定边距大小的段落。一个没有指定边距大小的段落。</p>
		<p class="ex1">一个右边距为 50px 的段落。一个右边距为 50px 的段落。一个右边距为 50px 的段落。一个右边距为 50px 的段落。一个右边距为 50px 的段落。</p>

	</body>
</html>

Copy after login

What does margin-right mean in css?

Extended knowledge: negative margin value

The negative margin means that the value of the margin attribute is set to a negative value, which is a very important issue in CSS layout. Useful tips. Scenarios with positive values are very common, and everyone is familiar with its performance

When margin-top and margin-left are negative values, the element will be moved up and left, and at the same time The position in the document flow also changes accordingly, which is different from the position:relative element that still occupies its original position after setting top and left.
When margin-bottom and margin-right are set When it is a negative value, the element itself has no position change, and subsequent elements will move down and to the right.

The situations you encounter should all be included here:

Block-level element settings margin-top margin-bottom will all be displaced, but Set margin-bottom, and the elements behind it will be displaced;
Inline elements will not be displaced even if margin-top margin-bottom is set, add absolute positioning (make them separate from the document flow, such as floating fixed positioning), setting margin-top will cause displacement; changing the vertical-align setting (middle top), inline block elements setting margin-top margin-bottom can cause displacement;
Set margin-left. Both block-level elements and inline elements will be displaced. The difference is that the content after the block-level element will not be displaced, but the content after the inline element will be displaced (because the content after the inline element is next to it. Same line);
If the block-level element sets margin-right, its own width will increase; if the inline element sets margin-right, the inline element behind the element will be displaced according to the numerical value

Note: Factors affecting margin display effect: display positioning mechanism verticle-align

(Learning video sharing:

css video tutorial, web front-end）

The above is the detailed content of What does margin-right mean in css?. For more information, please follow other related articles on the PHP Chinese website!