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

How to implement Linux disk mounting, partitioning, and capacity expansion operations

Basic Concepts Before operation, you must first u...

Is mysql a relational database?

MySQL is a relational database management system....

JavaScript Composition and Inheritance Explained

Table of contents 1. Introduction 2. Prototype ch...

Use CSS to achieve 3D convex and concave effects on images (convex out of the frame or concave in the frame)

Ⅰ. Problem description: Use CSS to achieve 3D con...

The data folder failed to be created automatically during the installation of mysql8.0.14.zip. The service cannot be started.

After reinstalling the system today, I reinstalle...

MySQL database terminal - common operation command codes

Table of contents 1. Add users 2. Change the user...

Detailed explanation of the functions and usage of MySQL common storage engines

This article uses examples to illustrate the func...

Detailed explanation of MySQL cursor concepts and usage

This article uses examples to explain the concept...

An Uncommon Error and Solution for SQL Server Full Backup

1. Error details Once when manually performing a ...

MySQL fuzzy query usage (regular, wildcard, built-in function)

Table of contents 1. MySQL wildcard fuzzy query (...

What is MIME TYPE? MIME-Types type collection

What is MIME TYPE? 1. First, we need to understand...

How to implement Nginx reverse proxy for multiple servers

Nginx reverse proxy multiple servers, which means...

How to run Python script on Docker

First create a specific project directory for you...

Analysis of MySQL example DTID master-slave principle

Table of contents 1. Basic Concepts of GTID 2. GT...

How to upgrade https under Nginx

Purchase Certificate You can purchase it from Ali...