search
HomeWeb Front-endCSS TutorialAnalysis of usage and common problems of margin in CSS

We are familiar with margin. This article mainly introduces the usage of margin in CSS and the analysis of common problems. The introduction in the article is very detailed and has certain reference and learning value for everyone. Friends who need it can follow Let’s take a look together.

1. Introduction

marginWe are generally used to calling it margins. We can set the margins in four directions respectively. No more details here. Describe the assignment syntax in detail.

Actually, the margins we usually set are physical-level settings, and margins also include start, end, before, after, etc. These are mainly logical-level settings. If you are interested, Google it yourself. .

When setting margin, we must know:

  • For block-level elements, how effective is margin in four directions;

  • For inline elements, margin is only effective in the horizontal direction.

2. Box model

Speaking of margin, I have to talk about the box model:

1. Content => padding => border => margin

The reason why the box model needs to be understood from the inside and outside is mainly because the standards of the box model are different. It determines what the width we set in CSS is. At this time, everyone will think of those calculation formulas. In fact, with the arrival of CSS3, we can set the standard of the box model through box-sizing:

2. border-box: width is calculated from border;

3. content-box: width is calculated from content;

4. padding-box: has been calculated from removed from the standard.

Here’s another picture, are you already aware of it?

##3. Margin overlap problem

This kind of problem mainly occurs on block elements and not floating elements (it is not described clearly here, and will be discussed in detail later). Let’s take a look at what happened.

1. Occurs in adjacent sibling elements


    .a {
        margin: 50px 0;
    }
    .b {
        margin: 100px 0;
    }

Adjacent sibling Margin overlap of elements


In this case, margin overlap occurs. The distance between adjacent sibling nodes is the maximum margin value. The best way to avoid this situation is to set only margin-top or margin-bottom.

2. Occurs at the parent-child node


    p(class="b")
    p(class="a")
        p(class="c") C


    .a {
        margin: 20px 0;
    }
    .b {
        margin: 100px 0;
    }

Margin overlap occurs between parent and child nodes


According to our understanding here, the distance between a and b should be 20 pixels, and the distance between c and a is 100 pixels. But this is not the case. Here we can solve the overlapping problem through the following methods:

  • The parent element sets the border;

  • The parent element sets the padding ;

  • The parent element sets overflow to hidden or scroll, others are not applicable;

  • The parent element sets position to fixed or absolute, others not applicable.

4. Magical negative margin value

We set the margin in four directions for a block element What happens:

  • Setting negative values ​​for top and left will move the element up or to the left by the corresponding pixel distance;

  • setting bottom and right Negative values ​​will move adjacent elements up or to the left.

There is another point here. When I checked the information, I found that many people said that negative margin can change the width of the element. I would like to correct it here. This is not a characteristic of negative margin. , but the characteristics of margin. For example, the following CSS can completely set the width of block-level elements.


    .item {
        margin: 0 200px;
        height: 200px;
    }

Margin assignment is widely used in layout. For example, if we know the width and height of an element, you can center it through negative margin values.


    .item {
        position: absolute;
        background: red;
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }

5. Margin and float

For these two troublesome attributes, Together, let me just say, it was a real blast. I said above that "this problem mainly occurs on block elements and not floating elements". Here are two more points:

  • Adjacent sibling elements, if both of them are floating element, no margin overlap will occur;

  • For parent-child elements, if one of them is a floating element, no margin overlap will occur;


Mainly because the floating elements are not in the normal document flow, so it is better to use the method of clearing the floats. (The following is the implementation of bootstrap)


    .clearfix::before, .clearfix::after {
        content: " ";
        display: table;
    }

    .clearfix::after {
        clear: both;
    }

学完本文相信大家对css 中margin属性有更深的认识,大家赶紧收藏起来吧。

相关推荐:

CSS的margin有什么作用

有关margin负值浅析

分享一篇关于margin的相关技巧

The above is the detailed content of Analysis of usage and common problems of margin in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement
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
How Do You Remove Unused CSS From a Site?How Do You Remove Unused CSS From a Site?Apr 14, 2025 am 10:59 AM

Here's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells

An Introduction to the Picture-in-Picture Web APIAn Introduction to the Picture-in-Picture Web APIApr 14, 2025 am 10:57 AM

Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop

Ways to Organize and Prepare Images for a Blur-Up Effect Using GatsbyWays to Organize and Prepare Images for a Blur-Up Effect Using GatsbyApr 14, 2025 am 10:56 AM

Gatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually

Oh Hey, Padding Percentage is Based on the Parent Element's WidthOh Hey, Padding Percentage is Based on the Parent Element's WidthApr 14, 2025 am 10:55 AM

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the

When to Use SVG vs. When to Use CanvasWhen to Use SVG vs. When to Use CanvasApr 14, 2025 am 10:43 AM

SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the

A Super Weird CSS Bug That Affects Text SelectionA Super Weird CSS Bug That Affects Text SelectionApr 14, 2025 am 10:41 AM

You know how you can style (to some degree) selected text with ::selection? Well, Jeff Starr uncovered a heck of a weird CSS bug.

Two-Value Display Syntax (and Sometimes Three)Two-Value Display Syntax (and Sometimes Three)Apr 14, 2025 am 10:40 AM

You know the single-value syntax: .thing { display: block; }. The value "block" being a single value. There are lots of single values for display. For

Filtering Lists Dynamically With Vue on the Server Side is Easier Than You'd ThinkFiltering Lists Dynamically With Vue on the Server Side is Easier Than You'd ThinkApr 14, 2025 am 10:39 AM

I recently attended the ARTIFACT conference in Austin, TX, and was inspired by a few talks about accessibility through the lens of site performance. It became

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.