CSS Margin Full understanding

Source: Internet
Author: User
One, margin can be negative

In the box model, the Width/height, padding, and border of the content area cannot be negative, but the margin exception, which can be negative.

With regard to the use of negative margin, not much to understand, there will be a chance to add, here first paste a classic application, margin-left negative combination of floating implementation does not change the structure of the DOM fluid layout.

<! DOCTYPE html> 

Ii. percentage value of margin

When the value of the margin property is a percentage, it is always calculated as the base of the parent element's width.

Please see below this demo, originally tortured me n long ... Only blame I know too late, said more is tears ah ...

<! DOCTYPE html> 

Third, the merger of the margin in the vertical direction

This problem often leads to some confusion, but only one word can be remembered, and the vertical margin will merge only if it is close contact, and only close contact will merge.

The merging of the margin in the vertical direction, if it happens in neighboring elements, is well understood, but it is a bit weird if it happens between the parent element and the child element.

See Example:

<! DOCTYPE html> 

Eliminate the vertical margin Merge method: Add border or add padding to the parent element, breaking the close contact between the parent element and the child element margin.

Rules for margin consolidation:

<! DOCTYPE html> 

1. Two margin are positive, take the absolute value of large;

2. One margin is a positive number and the other margin is a negative number, added;

3. Two margin are negative, take the absolute value of the big one.

The above CSS margin comprehensive understanding is the small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support a lot of topic.alibabacloud.com.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.