Question

我编码了一个具有body元素的html文件，并且在body元素中有3个段落标签。

所有段落的边框均为2px纯黑色，我想使用flexbox折叠所有段落的边框。这是html和CSS代码：

<body>
  <p>
    iisquam quis maxime laudantium, rerum saepe, eum, nam velit ipsam expedita sed nulluisquam minus ullam ducimus ipsam excepturi eligendi, harum similique perspiciatis provident accusamus suscipit! Hic doloribus inventore corrupti obcaecati praesentium maiores reiciendis consectetur pariatur veritatis quam saepe libero blanditiis fugiat, quae recusandae cumque. Delectus libero, nam accusamus mollitia quia deserunt?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, aut magnam? Iure nemo totam corporis in quos, nesciunt suscipit at reprehenderit pariatur cupiditate tempore iste error, ducimus ea eveniet aut ipsum id labore, quidem impedit nihil voluptate fugiat voluptatum explicabo. Iusto officia unde, nesciunt aliquam enim temporibus? Eaque, placeat dignissimos!
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos autem exercitationem laborum illo ipsum ex corporis omnis. Rem dignissimos perspiciatis sequi quod officiis, reiciendis iste.
  </p>
</body>
<style>
body{
  display:flex;
  flex-direction:column;
  justify-content:stretch;
}
p{
  border:2px solid black;
  maring:0;
}
</style>

您可以看到justify-content属性设置为Stretch。但是在输出中，这些图完全没有拉伸。每个段落元素之间都有一个空格，并且边框没有折叠。如何修复CSS代码，使所有flex项周围都没有空白之类的空白

Answer 1

您的CSS中有错字。

p{
  border:2px solid black;
  maring:0;
}

更改

maring: 0;

到

margin: 0;

它应该可以工作。

Answer 2

采用<p>标签的样式

代替：

maring:0;

使用

margin:0px;

这只是CSS定义中的错字。

flex-direction：列对齐内容不起作用

2 个答案: