Question

根据代码，我想降低内部div的“中间度”，除非我给外部div的“ layout”一个填充值，否则它不起作用，需要对此进行解释

我还认为，可以通过给“ inner div”内联代码块值 ONLY （甚至不是代码块值）来解决此问题，我也需要对此进行解释

h1,h2,h3,p,div,section,header,footer,section,article,nav,ul,html,body
{
    
    margin: 0;
    padding: 0;
    
}

li{list-style-position: inside;list-style-type: none;}
body{background-color:white}
*{box-sizing: border-box;}
a{text-decoration: none;}


.header-text{text-align:center;}
.layout{width: 60%;margin: auto; background-color: #4DC1E8;height:300px;padding-top: 0px;}
.smedia{width:200px;background-color: antiquewhite;margin-top: 90px;}
.logo{border-right-style: solid;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="p3css.css" >
</head>
<body>
   <h1 class="header-text">Clean Profile Widget</h1>
    <div class="layout">
        <div class="smedia">
            <span class="logo">FB</span>
            <span class="logo">TWR</span>

        </div>
    </div>
        
</body>
</html>

在进行填充时

h1,h2,h3,p,div,section,header,footer,section,article,nav,ul,html,body
{
    
    margin: 0;
    padding: 0;
    
}

li{list-style-position: inside;list-style-type: none;}
body{background-color:white}
*{box-sizing: border-box;}
a{text-decoration: none;}


.header-text{text-align:center;}
.layout{width: 60%;margin: auto; background-color: #4DC1E8;height:300px;padding-top: 1px;}
.smedia{width:200px;background-color: antiquewhite;margin-top: 90px;}
.logo{border-right-style: solid;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="p3css.css" >
</head>
<body>
   <h1 class="header-text">Clean Profile Widget</h1>
    <div class="layout">
        <div class="smedia">
            <span class="logo">FB</span>
            <span class="logo">TWR</span>

        </div>
    </div>
        
</body>
</html>

提前谢谢。

Answer 1

您错过的是overflow: auto;。将其添加到父容器可使保证金正常工作。

您面临的问题被称为“边际崩溃”，这是众所周知的。您可以here或here来了解它。

您可以了解有关溢出的使用以及它如何影响元素here的信息。

h1,
h2,
h3,
p,
div,
section,
header,
footer,
section,
article,
nav,
ul,
html,
body {
  margin: 0;
  padding: 0;
}

li {
  list-style-position: inside;
  list-style-type: none;
}

body {
  background-color: white
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.header-text {
  text-align: center;
}

.layout {
  overflow: auto;
  width: 60%;
  margin: auto;
  background-color: #4DC1E8;
  height: 300px;
  padding-top: 0px;
}

.smedia {
  width: 200px;
  background-color: antiquewhite;
  margin-top: 90px;
}

.logo {
  border-right-style: solid;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="p3css.css">
</head>

<body>
  <h1 class="header-text">Clean Profile Widget</h1>
  <div class="layout">
    <div class="smedia">
      <span class="logo">FB</span>
      <span class="logo">TWR</span>

    </div>
  </div>

</body>

</html>

CSS边距没有填充无法正常工作

1 个答案: