How to use negative padding in css

Question

I want to add negative padding in css, I have written a small code of battery charging cell. What I want is if I enter value in negative like -1px than the cell color should move to the left side and div should stay in center.

.cell {
  width: 100px;
  height: 30px;
  border: 1px solid black;
}

.padding {
  background-color: #3D9970;
  width: 10px;
  float: left;
  height: 30px;
  position: absolute;
  left: 55px;
  padding-right: 1px;
}

<div class="cell">
  <div class="cell1"></div>
  <div class="padding"></div><span style="display: inline;">	
    </div>

Please help me.

Answer 1

The easiest way is to use an absolute positioning relatively to a parent node. Here the parent node would be the battery "housing".

So you can set the position CSS value of the rot div to relative, and then the charge one to absolute. Indeed, according to MDN Webdocs:

absolute: [...] It is positioned relative to its closest positioned ancestor, if any.

Then, you just have to play with the left and width CSS properties. For the "middle" case, I chose to display one border.

Below a working snippet. Just click the "Begin the charge variation" button to start the show.

var chargeElement = document.getElementById("charge");

// To set a charge to the battery, simply call: setCharge(percentage)

function setCharge(percentage) {

  var left;
  var width;

  if (percentage > 100) percentage = 100;
  if (percentage < 0) percentage = 0;
  
  chargeElement.setAttribute("data-value", percentage);

  // If the charge is 50%, simply draw a line
  if (percentage == 50) {
    chargeElement.className = "middle";
  } else {
    chargeElement.className = "";
  }

  // Otherwise, adjust left and width values
  if (percentage >= 50) {
    left = 50;
    width = percentage - left;
  } else {
    left = percentage;
    width = 50 - left;
  }

  // Then update the charge style.
  chargeElement.style.left = left + "%";
  chargeElement.style.width = width + "%";

}

// A simple function to add / remove some charge

function addCharge(percentage) {
  var value = parseInt(chargeElement.getAttribute("data-value"));
  value += percentage;
  setCharge(value);
}

// Here just some stuff for illustration.
// You don't need those functions to set the charge.

function letsBeginTheShow(buttonElement) {
  buttonElement.disabled = true;
  setNextCharge(10);
}

function setNextCharge(increment) {
  var percentage = parseInt(chargeElement.getAttribute("data-value"))
  percentage += increment;
  if (percentage > 100) {
    percentage = 100;
    increment = -5;
  }
  if (percentage < 0) {
    percentage = 0;
    increment = 5;
  }
  setCharge(percentage);
  setTimeout(function() {
    setNextCharge(increment);
  }, 50);
}

setCharge(50);

.battery {
  position: relative;
  width: 100px;
  height: 30px;
  border: 1px solid black;
  /* Below : only for aestethic reasons */
  float: left;
  margin-right: 30px;
  /* End of aesthethic stuff */
}

#charge {
  height: 100%;
  position: absolute;
  background-color: #3D9970;
  border-color: #3D9970;
}

.middle {
  border-left: 1px solid;
}

<div class="battery">
  <div id="charge" data-value="50" class="middle"></div>
</div>

<button onclick="letsBeginTheShow(this)">Begin the charge variation</button>

Answer 2

I think you can achieve the same effect with pseudo elements:

.cell{
  display:block;
  width: 100px;
  height: 30px;
  position:relative;
}
.cell:before{
  content:'';
  background-color: #3D9970;
  width: 10px;
  top:0;
  left:calc(50% - 5px);
  height: 100%;
  position: absolute;
}
.cell:after{
  content:'';
  border: 1px solid black;
  width:100%;
  height:100%;
  display:block;
  top:0;
  left: 0px;
  position: absolute;
}

<div class="cell">

</div>

"Left" property could be negative, so if you change it you can move the position of the green rectangle in the middle (.cell:before) of the block and border itself (.after)

Answer 3

You can't.

---

See the specification:

Unlike margin properties, values for padding values cannot be negative.