Question

我想重新创建此图像以用于锻炼目的。

为此，我正在嵌套div，并为它们添加填充，如此（摘录）：

div {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  padding-right: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
}

...

<body>
  <div>
    Content
    <div></div>
  </div>
</body>

但这似乎并不合适。这实际上是要走的路吗？

Answer 1

我能想到的最好的是：

HTML：

<div id="margin">
    <p>Margin</p>
    <div id="border">
        <p>Border</p>
        <div id="padding">
            <p>Padding</p>
            <div id="content">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

CSS：

div {
    text-align: center;
    margin: 0 1em 1em 1em;
}

#margin {
    border: 1px dashed #ccc;
    background-color: #fff;
    color: #000;
}

#border {
    border: 1px solid #000;
    background-color: #9f2;
}

#padding {
    border: 1px solid #000;
    background-color: #fff;
}

#content {
    border: 1px dashed #ccc;
    height: 2em;
}

JS Fiddle demo

为此，我正在嵌套div，并为它们添加填充......但这似乎不太合适。这实际上是要走的路吗？

我认为这是唯一的方式，因为图像类型描述了各个组件之间的层次关系，而我能想到的唯一选择是使用大量的position: absolute div s，不会传达或暗示各部分之间的任何关系。

Answer 2

像http://jsfiddle.net/r5Vu9/这样的东西？

如何使用css重新创建此图像

2 个答案:

HTML：

CSS：