互联网技术 · 2024年2月11日 0

解决HTML中嵌套div的margin失效问题的方法

这篇文章主要介绍了HTML中div嵌套div的margin不起作用的解决方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

下面介绍一下div嵌套div时margin不起作用的解决方案。

顺便科普下margin的定义和用法。

解决HTML中嵌套div的margin失效问题的方法

div嵌套的HTML代码:

<!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;
        &