Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<body>
  <h3>Tabs</h3>
  <hr/>
  <span class="code padding indent"><span class="ws tab">   </span>tab with padding + indent</span>
  <hr/>
  <span class="code padding"><span class="ws tab">  </span>tab without indent but padding</span>
  <hr/>
  <span class="code"><span class="ws tab">  </span>tab without indent + padding</span>
  <hr/>
  
  <h3>Spaces</h3>
  <hr/>
  <span class="code padding indent"><span class="ws space">    </span>spaces with padding + indent</span>
  <hr/>
  <span class="code padding"><span class="ws space">    </span>spaces without indent but padding</span>
  <hr/>
  <span class="code"><span class="ws space">    </span>spaces without indent + padding</span>
  <hr/>
  
  
  <h3>Hack</h3>
  <hr/>
  <span class="m code indent padding"><span class="ws tab">    </span>With 4 spaces instead of tab <i>(with padding + indent)</i></span>
  <hr/>
</body>
 
body {
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: monospace;
}
​
​
.code {  
  display: block;
  white-space: pre-wrap;
  background: papayawhip;
 }
​
.padding {
  padding-left: 2em;
}
​
.indent {
  text-indent: -2em;  
}
​
.ws {
  background: lime; 
  position: relative;
  line-height: 1em;
  text-indent: 0px;
}
​
.ws::before {
  position: absolute;
  left: 0px;
  top: 0px;
}
​
.tab::before {
  content: '→';  
}
​
.space::before {
  content: '····';
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers