Question

我今天开始使用Google prettyprint工具，因为我正在开始一个新项目，但是，似乎有不必要的填充，我认为数字应该去，但我不太确定。

无论如何，如何删除此填充/边距？

我尝试了padding: 0 !important;，margin: 0 !important;，text-align: left !important;和float: left !important;之类的内容，但无济于事。

图片示例：

代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;skin="></script>
    <style>
      table {
        border: 0;
        width: 100%
        }

      th {
        text-align: left;
        }

      #code-box {
        border-left: 5px solid #5C00AC;
        }

      #no-border {
        border: none !important;
        }

    </style>
  </head>
  <body>
    <h1>ModPE API</h1>
    <br>
    <h2>Members</h2>
    <hr>
    <h4 style="margin-bottom:0px;">ArmorType</h4>
    <p>Armor Types.</p>
    <br>
    <table>
      <tr>
        <th>Name</th>
        <th>Type</th>       
        <th>Description</th>
      <tr>
        <td>helmet</td>
        <td>int</td>
        <td>0</td>
      </tr>
      <tr>
        <td>chestplate</td>
        <td>int</td>        
        <td>1</td>
      </tr>
      </tr>
      <tr>
        <td>leggings</td>
        <td>int</td>
        <td>2</td>
      </tr>
      <tr>
        <td>boots</td>
        <td>int</td>        
        <td>3</td>
      </tr>
    </table>
    <h4>Example:</h4>
    <div id="code-box">
      <pre class="prettyprint" id="no-border">
        print(ArmorType.chestplate);
      </pre>
    </div>
  </body>
</html>

Answer 1

空格是由HTML中的空白字符引起的。您不需要编辑CSS。

改变这个：

  <pre class="prettyprint" id="no-border">
    print(ArmorType.chestplate);
  </pre>

对此：

<pre class="prettyprint" id="no-border">print(ArmorType.chestplate);</pre>

Answer 2

如果您希望缩进以提高可读性，只需在回车后删除空格即可实现相同的效果。需要明确的是，在预打开和结束标记之前也不需要空格。

<pre class="prettyprint" id="no-border">
  print(ArmorType.chestplate);
</pre>

<!-- Becomes -->

<pre class="prettyprint" id="no-border">
print(ArmorType.chestplate);
</pre>

删除google prettyprint padding？

2 个答案: