📌  相关文章
📜  如何删除引导程序4的pre标签中引入的边距？(1)

📅  最后修改于: 2023-12-03 15:08:29.733000             🧑  作者: Mango

如何删除引导程序4的pre标签中引入的边距？

如果你在使用 Bootstrap 4 中的 pre 标签显示代码时，发现了不必要的边距，可以按照下面的步骤来删除它们。

Step 1：通过CSS去除边距

首先，我们需要创建一个自定义的 CSS 样式表，并给 pre 标签添加以下样式：

pre {
  margin: 0;
  padding: 0;
}

这里使用 margin: 0; 和 padding: 0; 来移除 pre 标签的默认内外边距。

Step 2：连接自定义CSS文件

将上面的 CSS 样式保存到一个样式表文件中，然后在 HTML 文档中通过链接该文件的方式引入。

<head>
  <link rel="stylesheet" href="your-custom-style.css">
</head>

Step 3：应用自定义样式

在代码块中应用我们刚刚定义的样式：

<pre class="my-code">
  <code>
    #include <iostream>

    int main() {
      std::cout << "Hello, World!";
      return 0;
    }
  </code>
</pre>

这里把自定义的样式类 .my-code 添加到 pre 标签。

完整示例

下面是一个完整的示例，可以直接复制到你的文件中并进行测试。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>删除引导程序4的pre标签中引入的边距</title>
  <link rel="stylesheet" href="your-custom-style.css">
</head>
<body>
  <h1>如何删除引导程序4的pre标签中引入的边距？</h1>
  <pre class="my-code">
    <code>
      #include <iostream>

      int main() {
        std::cout << "Hello, World!";
        return 0;
      }
    </code>
  </pre>
</body>
</html>

在 your-custom-style.css 文件中添加以下样式：

pre {
  margin: 0;
  padding: 0;
}

.my-code {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-left: 3px solid #f36d33;
  color: #666;
  page-break-inside: avoid;
  font-family: monospace;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1em 1.5em;
  display: block;
  word-wrap: break-word;
}

通过上面的步骤，你就可以成功地删除 pre 标签中引入的边距了。