Question

我有一个可编辑的页面和内容，它由文本块和
标签组成，作为段落之间的分隔符。我希望段落之间的距离更大，而found解决方案与

br {
    display:block;
    margin-top: 15px;
    content: " "
}

但在这种情况下，行中的多个br标记会折叠。我也找到了行高的解决方案，但在这种情况下，空行上的光标看起来很奇怪。我无法使用 p 标记，那么还有其他解决方案吗？

＆＃13;

body {
  display: flex;
}

.first {
  margin-right: 30px;
}

.first br {
  display: block;
  margin-top: 15px;
  content: " ";
}

.second br {
  display: block;
  margin-top: 15px;
  line-height: 50px;
}

＆＃13;

<body contenteditable="true">
  
  <div class="first">
    <h3>display:block solution</h1>
    Lorem ipsum dolor sit amet
    <br>
    Lorem ipsum dolor sit amet
    <br>
    <br>
    Lorem ipsum dolor sit amet
  </div>
  <div class="second">
    <h3>line-height solution</h1>
    Lorem ipsum dolor sit amet
    <br>
    Lorem ipsum dolor sit amet
    <br>
    <br>
    Lorem ipsum dolor sit amet
  </div>
</body>

＆＃13;

Answer 1

但在这种情况下，行中的多个br标记已折叠

尝试添加透明的border-top，以避免折叠边距的影响。

body {
  display: flex;
}

.first {
  margin-right: 30px;
}

.first br {
  display: block;
  margin-top: 15px;
  border-top: 1px solid transparent;
  content: " ";
}

.second br {
  display: block;
  margin-top: 15px;
  line-height: 50px;
}

<body contenteditable="true">
  
  <div class="first">
    <h3>display:block solution</h1>
    Lorem ipsum dolor sit amet
    <br>
    Lorem ipsum dolor sit amet
    <br>
    <br>
    Lorem ipsum dolor sit amet
  </div>
  <div class="second">
    <h3>line-height solution</h1>
    Lorem ipsum dolor sit amet
    <br>
    Lorem ipsum dolor sit amet
    <br>
    <br>
    Lorem ipsum dolor sit amet
  </div>
</body>

在第一个例子中，第二行和第三行之间达到双线高度，至少在Chromium上。 Firefox似乎没有首先出现这个问题，因为你的两个例子看起来都是一样的。尚未测试Internet Explorer和Edge。

但这是一个相当黑客且容易出错的解决方案。你说你“不能”使用正确的段落元素 - 但你应该能够，否则你的内容编辑系统相当......好吧，很糟糕。这不仅仅是“它看起来如何”的问题，还包括语义，以及可能的搜索引擎排名等。

带有文本的HTML标签高度

1 个答案: