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

JS uses clip-path to implement dynamic area clipping function

Blog

After installing Navicat in MySQL, 2059 appears, Authentication plugin and local link virtual machine docker, remote link server

Blog

VMware virtualization kvm installation and deployment tutorial summary

Solution to the ineffective margin of div nested in HTML

JS uses clip-path to implement dynamic area clipping function

After installing Navicat in MySQL, 2059 appears, Authentication plugin and local link virtual machine docker, remote link server

VMware virtualization kvm installation and deployment tutorial summary

Introduction to Docker containers

An example of the execution order between the href jump and onclick of the html hyperlink a tag

Implement group by based on MySQL to get the latest data of each group

11 Examples of Advanced Usage of Input Elements in Web Forms

Comprehensive understanding of Node event loop

Navicat for MySQL scheduled database backup and data recovery details

503 service unavailable error solution explanation

Recommend

A brief discussion on an efficient algorithm for constructing tree structures in JavaScript

Solution for adding iptables firewall policy to MySQL service

How to load Flash in HTML (2 implementation methods)

SQL GROUP BY detailed explanation and simple example

JavaScript to add and delete messages on the message board

Mount the disk in a directory under Ubuntu 18.04

Solution to the problem that the virtual machine Ubuntu 16.04 cannot connect to the Internet

How to enable or disable SSH for a specific user or user group in Linux

Detailed steps for implementing timeout status monitoring in Apache FlinkCEP

CSS naming conventions (rules) worth collecting Commonly used CSS naming rules

How to install Apache service in Linux operating system

WeChat applet to save albums and pictures to albums

WML tag summary

Detailed tutorial on installing Mysql5.7.19 on Centos7 under Linux

IIS7 IIS8 http automatically jumps to HTTPS (port 80 jumps to port 443)