方形的<div>

Question

.products
{
  width: 100%;
  height: 500px;
  background: gray;
}

.box
{
  width: 250px;
  height: 300px;
  background: darksalmon;
  border: 1px solid #000;
}

<div class="products">
  <div class="box">
    <p>Ola</p>
  </div>
</div>

我希望段落出现在正方形内。代码显示2个div在一起。并且只显示段落中的内容。

此图像说明了我想要的格式：

Answer 1

试试这个......

background-color: ;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;

Answer 2

你试过吗

<p class="box">...</p>

删除包裹段落的div？

Answer 3

.products
{position:relative;
  width: 100%;
  height: 500px;
  background: gray;
}

.box
{p
  width: 250px;
  height: 300px;
  background: darksalmon;
  border: 1px solid #000;
}

<div class="products">

    <p>Ola</p>
  </div>
  <div class="box">
</div>