html - 使 div 100px x 100px

Question

如何在不使用 CSS 和 HTML 的情况下将这些 div 设置为特定大小？

如您所见，如果您自己尝试这段代码。
我把这些盒子排成一排。
我最终也想拥有更多，几乎形成一个网格。

body {
    background-color: #fff;
}
.blackcolor1 {
    background-color: #000;
    padding: 40px;
    margin: 10px;
    display: inline;
    min-height: 100px !important;
    min-width: 100px !important;
    max-height: 100px !important;
    max-width: 100px !important;
}
.border {
    margin: 100px;
    padding: 1px;
}

<div class="border">
  <div class="blackcolor1"></div>
  <div class="blackcolor1"></div>
  <div class="blackcolor1"></div>
  <div class="blackcolor1"></div>
</div>

我已经做了我知道要做的每一件事。
但是我的 div 不会调整到 100px X 100px。
我只能让他们靠近。
我不必在论文中添加任何内容就可以让它们工作。

Answer 1

您不能为行内元素分配大小:

This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children).
http://www.w3.org/TR/CSS2/visudet.html#propdef-width

将 display: inline 替换为 display: inline-block 将为您提供预期的大小，同时允许元素存在于同一行。

请注意，填充会增加框的大小，除非您使用 box-sizing: border-box

body {
    background-color: #fff;
}
.blackcolor1 {
    box-sizing: border-box;
    background-color: #000;
    padding: 40px;
    margin: 10px;
    display: inline-block;
    min-height: 100px !important;
    min-width: 100px !important;
    max-height: 100px !important;
    max-width: 100px !important;
}
.border {
    margin: 100px;
    padding: 1px;
}

<div class="border">
  <div class="blackcolor1"></div>
  <div class="blackcolor1"></div>
  <div class="blackcolor1"></div>
  <div class="blackcolor1"></div>
</div>