Removing whitespace from the html

Is this how it’s done?

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

<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/
image

<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>
<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
.info {
    overflow: hidden;
 }

.info label{
    float: left;
    margin-right: 0.5em;
 }
#searchFor {
    float: left;
    height: 2em;
    border: 0;
    background-color: #000;
    color: #fff;
    text-indent: 0.5em;
 }

#sent {
    float: left;
    width: 2.2em;
    height:2.2em;
    border: 1px solid #000;
    background-color: #ffa500;
    cursor: pointer;
 }

#sent svg {
    display: block;
    margin-left: -0.4em;
 }
</style>

</head>
<body>

 <div class="info">
  <label for="searchFor">Search:</label>
   <input type="text" id="searchFor" name="someNameHere" placeholder="Search">

  <button id="sent">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 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>
  </button>
 </div>

</body>
</html>

What I mean is, going from this:

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

image

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

That’s how whitespace is removed from the html?

Have you tried it, and does it work?

Do you understand why it produces the result you see?

1 Like

Yes it does work.

You didn’t answer my other question.

Do you understand why it works? This is another issue you’ve asked about before, so it’s important you understand what’s happening so that you don’t find yourself back here asking about it again in a few weeks or months.

1 Like

It removes the white-space from the html.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.