CODEWITHSUNDEEP
htmlcssstyles
user4756836
user4756836

Reputation: 1337

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.

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

.list > .status-bar {
  background-color: red;
  width: 20px;
  display: inline-block;
}
<div class="list">
  <span class="status-bar">&nbsp;</span>Test 1
</div>

Upvotes: 0

Views: 147

Answers (3)

Nitrick
Nitrick

Reputation: 131

Add another span and put padding in class

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

</div>

.l1{
  padding: 0px 115px 0px 0px;
}

Upvotes: 1

Saravanan Kasi
Saravanan Kasi

Reputation: 696

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/

Upvotes: 2

Dennis Novac
Dennis Novac

Reputation: 1011

Remove the padding from list:

https://jsfiddle.net/bfktcehb/8/

Upvotes: 0

Related Questions