How to Make Padding:Auto Work in CSS

How to make padding:auto work in CSS?

auto is not a valid value for padding property, the only thing you can do is take out padding: 0; from the * declaration, else simply assign padding to respective property block.

If you remove padding: 0; from * {} than browser will apply default styles to your elements which will give you unexpected cross browser positioning offsets by few pixels, so it is better to assign padding: 0; using * and than if you want to override the padding, simply use another rule like

.container p {
   padding: 5px;
}

Is it possible to center elements using padding: 0 auto?

Actually you can't do padding: 0 auto; but there is a trick that would do the same:

.elem{
    padding: 0 calc(50% - 160px);
}

This is kind of similar to max-width: 320px; + margin: 0 auto;
So, unfortunatly, the max width is implicit but... this is really usefull anyway.

The explanation:

This is what is really happening here:

paddingRight = paddingLeft = (parentWidth - elemMaxWidth) / 2;

Which means that we take the parent width, substract the element width, the rest is the value of the right padding plus the left padding, so we divide it by 2.

This method works on almost every browser, but old IE versions.

How to auto padding?

Just add flex-grow: 1 to the anchor to fill out the entire parents space. However this requires that the parent is declared as flexbox: display: flex

.grid > div {
  display: flex;
}

.grid > div > a {
  flex-grow: 1;
}

/* original CSS */
body { margin: initial }

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 10px;
}

.grid > div {
  text-align: center;
  background-color: bisque;
}

.grid > div > a {
  box-sizing: border-box;
  background-color: red;
  padding: 0 10px 0 10px;
}

<div class="grid">
  <div><a href="">1</a></div>
  <div><a href="">2</a></div>
  <div><a href="">3</a></div>
</div>

Auto Padding Bottom?

Just update the container to fill the parent size minus the 25px of margin you are specifying.

export const Container = styled.div`
  padding: 250px 50px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 0px;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
`;

or if you are using flex you could do

export const Container = styled.div`
  flex: 1;
  margin: 25px;
  padding: 250px 50px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 0px;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
`;

How to set padding equal to margin: auto?

If you don't want to touch your HTML, you can achieve the desired result by using @media and dynamically calculating the lateral padding. Note that you don't even have to use automatic margins:

Option 1:

.nav,
.inner {
  box-sizing: border-box;
  padding: 0 80px;
}

.nav {
  box-shadow: 0px 10px 8px -8px lime;
  display: flex;
}

.nav-item {
  margin: 0 8px;
}

.inner-item {
  background: red;
  height: 20%;
  margin: 10px 8px;
}

@media screen and (min-width: 1440px) {
  .nav,
  .inner {
    padding: 0 calc(80px + (100vw - 1440px) / 2);
  }
}

<div>
  <div class="container">
    <div class="nav">
      <div class="nav-item">Item 1</div>
      <div class="nav-item">Item 2</div>
      <div class="nav-item">Item 3</div>
      <div class="nav-item">Item 4</div>
    </div>
    <div class='inner'>
      <div class="inner-item">Item 1</div>
      <div class="inner-item">Item 2</div>
      <div class="inner-item">Item 3</div>
    </div>
  </div>
</div>

Why `padding:auto of parent div` does not same with `margin:auto of child div`?

Add Inline to text-align: center; to parent and display: inline-block; to child

.parent {  width: 500px;  height: 100px;  background: red;  text-align: center;}
.child {  width: 100px;  height: 100px;  background: blue;  display: inline-block;}

<div class="parent">  <div class="child"></div></div>

---

Related Topics