Solution to the ineffective margin of div nested in HTML

Solution to the ineffective margin of div nested in HTML

Here's a solution to the problem where margin doesn't work when divs are nested.

By the way, let’s learn the definition and usage of margin.

Div nested HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: dodgerblue;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 30px;
            background-color: gray;
        }
        .box .child{
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color:darkturquoise;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">

        </div>
    </div>
</body>
</html>

Actual effect:

This is actually not the effect we want. Let's first talk about why this problem occurs:

There are two nested divs. If the parent element padding value of the outer div is 0, the margin-top or margin-bottom value of the inner div will be "transferred" to the outer div.

To solve this problem, we need to first understand a property unique to IE: haslayout.

The effect we want to achieve is this:

Finally, let’s talk about the solution:

1. Let the parent element generate a block formatting context (block-level formatting context, you can learn about it on Baidu). The following properties can be achieved

float: left/right

position: absolute

display: inline-block

overflow: hidden/auto

2. Add border or padding to the parent element

Take overflow:hidden of method 1 as an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: dodgerblue;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 30px;
            background-color: gray;
            overflow: hidden;
        }
        .box .child{
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color:darkturquoise;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">

        </div>
    </div>
</body>
</html>

Final result:

This is the end of this article about how to solve the problem of margin not working when divs are nested in HTML. For more related content about margin not working when divs are nested in HTML, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Detailed explanation of the payment function code of the Vue project

>>:  Three ways to achieve text flashing effect in CSS3 Example code

Recommend

CSS+HTML to implement Skeleton Screen loading placeholder animation effect (with animation)

Effect Fading from top to bottom Source code html...

Summary of uncommon operators and operators in js

Summary of common operators and operators in java...

Implementation code for automatically adapting the width of the web page to the width of the mobile phone screen (viewport)

The general way of writing is as follows: XML/HTM...

The whole process record of vue3 recursive component encapsulation

Table of contents Preface 1. Recursive components...

Detailed explanation of the this pointing problem of JavaScript prototype objects

Table of contents 1. this points to 2. Modify thi...

How to use CSS attribute selectors to splice HTML DNA

CSS attribute selectors are amazing. They can hel...

Detailed explanation of the solution to the Baidu https authentication prompt "Please redirect your http site 301 to the https site"

I recently wanted to convert a website to https a...

Example of cross-database query in MySQL

Preface In MySQL, cross-database queries are main...

Solve the problem of MySQL using not in to include null values

Notice! ! ! select * from user where uid not in (...

How does MySQL achieve multi-version concurrency?

Table of contents MySQL multi-version concurrency...

React concurrent function experience (front-end concurrent mode)

React is an open-source JavaScript library used b...

Analysis of MySQL lock mechanism and usage

This article uses examples to illustrate the MySQ...

MySQL replication detailed explanation and simple example

MySQL replication detailed explanation and simple...

Summary of Nginx location and proxy_pass path configuration issues

Table of contents 1. Basic configuration of Nginx...

Select web page drop-down list and div layer covering problem

Questions about select elements in HTML have been...