预标记内HTML元素之间的行间距

Question

我试图在pre tag中插入一些html标签，但行之间存在很大差距

这是我的HTML代码

<h5>Help Message</h5>
    <pre ng-show="panel.info_mode == 'markdown'" ng-bind-html="panel.help_message | markdown"> </pre>
    <pre ng-show="panel.info_mode == 'text'" ng-style='panel.style' ng-bind-html="panel.help_message | striphtml | newlines"></pre>
    <pre ng-show="panel.info_mode == 'html'" ng-bind-html="panel.help_message"></pre>

panel.help_message将包含一些html元素，如

<h1>Dillinger</h1>
<p>Dillinger is a cloud-enabled HTML5 Markdown editor.</p>
<ul>
<li>Type some Markdown text in the left window</li>
<li>See the HTML in the right</li>
<li>Magic</li>
</ul>

，结果如下图

那么这条线张开的原因是什么

Answer 1

那是因为＆lt;前＆gt; element以固定宽度字体（通常为Courier）显示，并且它保留了空格和换行符。如果您想拥有自己的设计进行显示，那么尝试将文本包装在div或某个标签中，并使用您定义的类并写入你拥有css。

Answer 2

浏览器以各种方式呈现此类无效标记。它未指定且未记录，但基本上它们尝试应用标题元素的默认呈现等。和特殊pre渲染。他们不合适;它们不适合。

pre element可以包含不会更改字体大小的文本和文本级标记。如果您使用其他内容，您可能会感到奇怪。目前还不清楚你想要什么，以及如何最好地实现它，但标记应该重新设计。

Answer 3

因为浏览器有一些默认值，如填充，边距，行高等

您可以重置这些值：

h1,p,ul{margin:0;padding:0;line-height:normal;}

Answer 4

目前H1正在使用-webkit-margin-before：1em; -webkit-margin-after：1em;

更改-webkit-margin-before和-webkit-margin-after。

Answer 5

我不知道AngularJS是如何运作的（我从未使用过），但你试过设置

margin: 0;

或

padding:0;

或两者兼而有之？

也许只是一个CSS问题。

Answer 6

您可以像这样重置默认值

*{
    padding: 0;
    margin: 0;
}

它有点属性有一些默认值。

Answer 7

我用这个：

padding: 0;
margin: 0;