如何在html中删除文本的第一行缩进

Question

I'm having trouble formatting my output. I want each line of text to be horizontal on the left side. Here is the code I am using.

<div style="text-align: left;">
    <pre style="width: 75%; margin-left:auto; margin-right:auto;"><code class="sql">
        <c:out value="${snippet.query}"/>
    </code></pre>
</div>

Although the styling calls for the text to be aligned to the left of the div, the first line of output is always indented. Why is this happening? I can't post images yet, but this is what it looks like:

            CREATE SCHEMA "Trading";
SET SCHEMA '"Trading"';
CREATE STREAM "Orders"
(
   orderTime TIMESTAMP,
   orderId INTEGER,
   productId INTEGER,
   quantity INTEGER,
   unitPrice DECIMAL(11,2),
   shippingState CHAR(2)
);
CREATE STREAM Shipments
(
   shipTime TIMESTAMP,
   orderId INTEGER,
   warehouseState CHAR(2)
);  

I notice that if I remove the 'pre' tags I no longer have this issue, but without those tags proper text highlighting does not occur. I'm passing the variable snippet to the jsp like this:

  request.setAttribute("snippet", selectedQuery);

I've tested what this data looks like prior to sending it to the jsp. I observed the variable in System.out.print() and there is NO indentation on the String itself. selectedQuery is an object that holds several String variables.

Thank you for your help.

edit: I've tried using text-indent in the div, pre, and code tags but none of those had any effect.

Answer 1

The pre tag includes any white space. You have a bunch of white space between the opening and closing pre tags. Simply remove that and you should be fine :)

Like so:

<div style="text-align: left;">
    <pre style="width: 75%; margin-left:auto; margin-right:auto;"><code class="sql">
        <c:out value="${snippet.query}"/>
    </code></pre>
</div>

To

<div style="text-align: left;">
    <pre style="width: 75%; margin-left:auto; margin-right:auto;"><code class="sql">
<c:out value="${snippet.query}"/>
    </code></pre>
</div>