user4756836 user4756836 - 2 months ago 8
CSS Question

Remove padding from status bar

I want to remove the padding from just the status bar and have the padding on the text.

I added manual

padding: 0;
to the status bar but it didn't have any effects on it.

HTML:

<div class="list">
<span class="status-bar">&nbsp;</span>Test 1
</div>


CSS:

.list {
padding: 20px 0 20px;
border: 1px #666666 solid;
width: 250px;
}

.list > .status-bar {
background-color: red;
width: 20px;
display: inline-block;
}


JSFiddle Demo

Answer

You can use this code

HTML:

<div class="list">
  <span class="status-bar">&nbsp;</span>Test 1
</div>

CSS:

.list {
  padding:0;
  border: 1px #666666 solid;
  width: 250px;
}

.list > .status-bar {
  background-color: red;
  width: 20px;
  padding:20px;
  display: inline-block;
  height:100%;
}

https://jsfiddle.net/bfktcehb/11/

Comments