Home > Web Front-end > CSS Tutorial > Summary of how to use css margin-left and margin-right

Summary of how to use css margin-left and margin-right

伊谢尔伦
Release: 2017-06-01 14:40:31
Original
9224 people have browsed it

Generally in css styles, use the margin attribute to set margins. If you only need margins on one side, you can use the one-sided margin property to set a value for the margin on one side of the element. Use the margin-left attribute to set the left margin of an element. Use the margin-right attribute to set the right margin of an element. Their default value is 0. In specific actual use, you can set a specific unit value or set it as a percentage. This article will summarize the use of margin-left and margin-right.

##1. About the use of margin-left attribute

1.

CSS margin brief analysis

The negative value of margin-left is combined with floating to achieve a fluid layout that does not change the DOM structure. When the value of the margin attribute is a percentage, it is always calculated based on the width of the parent element.

2.

CSS Memo (margin-left)

Set margins: margin-top, margin-left, margin-right, margin-bottom

pBackground leaflet overlay settings: width: 30px; height: 30px; line-height: 30px; background-image: url(../image/lzhf/one.png); background-repeat: no-repeat ; background-size: 100% auto;

Parameter introduction

auto: The value is set to the value of the opposite side. length: A length value consisting of a floating point number and a unit identifier | or a percentage. The percentage is based on the height of the parent object.

Description Retrieve or set the extended margin on the left side of the object. To use this attribute on an inline object, you must first set the height or width attribute of the object, or set the position attribute to absolute. In IE4+, the margin attribute is not available for td and tr objects.

Extended margins are always transparent. The corresponding script feature is marginLeft.

2. About the use of margin-right attribute

1.

Detailed explanation of the three basic positioning mechanisms in CSS (margin-right, margin-left)

The preferred way to center an element horizontally in CSS is to use the margin attribute - change the margin-left and margin of the element Just set the -right attribute to auto. In actual use, we can create a p that acts as a container for these elements that need to be centered. One thing to note in particular is that the width of the container must be specified. 2.

Summary of various centered CSS layouts (margin-right, margin-left)

Summary of how to use css margin-left and margin-right

Centering is what we use css to A situation often encountered in layout. When using CSS for centering, sometimes a single attribute can do it, and sometimes it requires certain skills to be compatible with all browsers. Specifically, set the margin-left and margin-right of the element to be centered to auto. This method can only perform horizontal centering, and is invalid for floating elements or absolutely positioned elements. 3.

Examples of CSS implementation of various column layouts on the page (margin-right, margin-left)

Summary of how to use css margin-left and margin-right

One column layout requires mastering 3 knowledge points: standard document flow , which also includes block-level elements and row-level elements, as well as margin attributes. It can be said that the key code to implement a column layout is implemented by the margin attribute. Horizontal centering is achieved by setting margin: 0 auto;, auto means that it will be based on The width of the browser automatically sets the margins on both sides. To set margin, you must first have a box model, such as p here, and then set its length and width to a fixed size to achieve centering.

Double Flying Wing Layout This is because the margin-left and margin-right of the main column are a little larger than the width of the left and right columns, so you can set the gap between the main column and the sub-columns.

Q&A related to margin-left and margin-right attributes

1. css("margin- left") bit null??? Confused 2. margin-right doesn't work?

3. The following code has used margin-left:auto, why can’t it be centered?

【Related recommendations】

1. Summary of css margin attributes and usage

2. Summary of problems often encountered when using css margin-top

The above is the detailed content of Summary of how to use css margin-left and margin-right. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template