Removing whitespace from the html

HTML-CSS
1

Is this how it’s done?

This would become:
https://jsfiddle.net/w7cmthgv/216/

<div class="info">
  <input type="text" id="searchFor" name="someNameHere" placeholder="Search">
  <svg id="sent" viewBox="-2 0 24 24" width="24" height="24">
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
  </svg>
</div>

This:
https://jsfiddle.net/w7cmthgv/215/

<div class="info">
  <input type="text" id="searchFor" name="someNameHere" placeholder="Search"><svg id="sent" viewBox="-2 0 24 24" width="24" height="24">
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
  </svg>
</div>

What I mean is going from this:

placeholder="Search">
<svg id="sent"

To this:
placeholder="Search"><svg id="sent"

That’s how whitespace is removed from the html?

2

On line 2 after the input tag, delete the space between it and the svg tag. Thats the only difference between the two examples.

If I hadnt seen the second example code to compare them, I would have put a negative right-margin on the input tag to remove the space.

ETA: Sorry, reread the past part of your post and see that you already noticed that the svg on a new line added the extra space. Yeah, not sure why that does it, but personally, Id organize my html as usual, then remove the space in css.

1 Like
3

How do you remove whitespace from the CSS?

How would I do that here?
https://jsfiddle.net/w7cmthgv/216/

4

As I said above…with a negative right-margin on the input tag. Just add it to the css already there. For example, margin-right: -4px;

1 Like
5

I was told that that’s a magic number, and I shouldn’t be using those.

6

Give display: flex; to .info instead of display: table-cell;

7

Ah okay…no actually this doesnt fall under magic numbers… the majority of the time, magic numbers affect fonts. Here’s some information about it to understand what thats about and why they are bad.