css去掉p标签上下空白_使用CSS标签大小保留空白

css去掉p标签上下空白

By default, HTML pages ignore anything more than a single space, and collapse the excess to take up no space at all. The most common way to compensate for this behaviour is to specify margin or padding to the left or right of an element as a substitute for spaces, which remains the best solution in most cases. But there are occasions in which you’ll want to preserve the actual space characters: indentation before lines of code, for example.

默认情况下，HTML页面会忽略除单个空格之外的所有内容，并将多余的部分折叠以完全不占用任何空间。 补偿此行为的最常见方法是在元素的左侧或右侧指定margin或padding以替代空格，这在大多数情况下仍是最佳解决方案。 但是在某些情况下，您需要保留实际的空格字符：例如，在代码行之前的缩进。

CSS supports this in the form of tab-size.

CSS以tab-size的形式支持此功能。

If I have some sample code:

如果我有一些示例代码：

<pre><code>ol.generic-class {
	property: value;
}</code></pre>

It's possible to preserve the tab before the “property: value" line with tab-size, currently supported by all browsers except IE / Edge.

可以使用tab-size保留“ property: value ”行之前的tab-size ，当前除IE / Edge以外的所有浏览器都支持该标签。

To enable the property, and provide a graceful fallback in IE, set the white-space property to pre, while setting tab-size to the equivalent of 4 spaces:

要启用该属性并在IE中提供优美的备用，请将white-space属性设置为pre ，同时将tab-size设置为等于4个空格：

code {
	white-space: pre;
	tab-size: 4;
}

Visually, this produces the following:

在视觉上，这将产生以下结果：

ol.generic-class {
	property: value;
}

You could also use :before or :after generated content to produce spaces, rather than trying to preserve tabs. Generally I’d suggest using margin or padding instead, but this is an option:

您也可以使用:before或:after生成的内容来产生空格，而不是尝试保留制表符。 通常，我建议改用margin或padding ，但这是一个选择：

code:before {
	content: "        ";
	whitespace: pre;
}

翻译自: https://thenewcode.com/442/Preserving-Whitespace-With-CSS-tab-size

css去掉p标签上下空白