Question

我的代码中的粉色块li元素是间隔的，因为我使用了边距，但我认为在这种情况下使用填充更好，除非每次我尝试用填充替换边距属性，我无法分开粉红色的块彼此。如何使用填充而不是边距来填充li元素？

我尝试使用google搜索关于此的内容，但所有出现的内容都是CSS的更实用的应用，例如网站样式和文本间距，我无法弄清楚它是如何应用于我的工作的。

This is what it should look like (which I made using margin properties)

    .blue-container {
      background-color: #141f40;
      height: 100px;
      width: 400px;
      position: relative;
    }
    .white-container {
      background-color: #fff;
      height: 60px;
      width: 160px;
      position: absolute;
      top: 20px;
      left:220px;
    }
    .white-container > li{
      background-color: #a9004b;
      height: 40px;
      width: 40px;
      float: left;
      margin-top: 10px;
      margin-left: 10px;
    }

    <!DOCtype HTML>
        <html lang="jp">
        <head>
          <title>Siblings</title>
          <link rel="stylesheet" type="text/css" href="style.css">
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
        </head>
        <body>
          <main>
            <div class="blue-container">
              <ul class="white-container">
                <li>1</li>
                <li>2</li>
                <li>3</li>
              </ul>
            </div>
          </main>
        </body>
        </html>

Answer 1

您需要了解的第一件事是 margin 与 padding 之间的关系。边距用于从其父中“偏移”元素。相反，填充用于表示元素边缘与其子之间应该有多少空间。

box model ：

中对此进行了演示

根据您所需的图片，您的第一步是确保.white-container实际上包含.blue-container。只需调整 top 和 left 即可完成此操作。从这里开始，只需将padding应用于父级（.white-container）。

您可能还想隐藏 <li> 元素中的项目符号，这可以通过 list-style: none 来完成，如图所示在下面：

.blue-container {
  background-color: #141f40;
  height: 100px;
  width: 400px;
  position: relative;
}

.white-container {
  background-color: #fff;
  height: 60px;
  width: 160px;
  position: absolute;
  top: 0px;
  left: 220px;
  padding: 5px;
}

.white-container>li {
  background-color: #a9004b;
  height: 40px;
  width: 40px;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  list-style: none;
}

<!DOCtype HTML>
<html lang="jp">

<head>
  <title>Siblings</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
</head>

<body>
  <main>
    <div class="blue-container">
      <ul class="white-container">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </main>
</body>

</html>

Answer 2

边距创建/定义距离到相邻元素元素的边框之外。因此，它们不会被背景图像或背景颜色填充，因为它总是局限于边界内的区域。

填充在边框内并在边框和元素内容之间创建一些空格/距离（例如文本内容不会触摸边框，但与边框保持一定距离）。由于它们位于边框内，因此用背景图像或背景颜色填充。

在您的情况下，您显然需要保证金。

使用填充而不是边距来区分兄弟姐妹

2 个答案: