Search code examples
htmlcsspretty-print

Remove google prettyprint padding?

I started using the Google prettyprint tool today as I am starting a new project, however, there seems to be unnecessary padding where I think the numbers are supposed to go, but I'm not quite sure.

Anyways, how can I remove this padding/margin?

I have tried things such as padding: 0 !important;, margin: 0 !important;, text-align: left !important; and float: left !important; but to no avail.

Image example:

Image Example

Code:

<!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>
Solution

  • The space is caused by the whitespace characters in your HTML. You don't need to edit the CSS.

    Change this:

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

    To this:

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