csscss-calc

Can I use the auto value with the calc() property?


I wanted to set margin to auto plus some pixel amount using calc(), but my code doesn't seem to work.

selector {
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    background: red;
    margin: calc(auto + 5px);
}
<div></div>

Can I set calc() to an automatic margin plus a fixed value? Something like this:

enter image description here


Solution

  • Looking at my own question today, I feel ashamed why I couldn't think it correctly? Basically, auto margin is what left margin 50% minus width of the div. In this basis, we can layout the element like this:

    margin-left: calc(50% + 5px);
    transform: translateX(-50%);
    

    Using the preceding code is equivalent to calc(auto + 5px);. Since, calc doesn't support auto we need to trick with actual concept of translation. This means we can also layout with absolute position with the concept of 50% - half of width, but I like transform here for simplicity.

    See the demo below:

    .parent{
      position: relative;
    }
    .child{
      border: 2px solid green;
      width: 25%;
      height: 50px;
      margin: 10px auto;
    }
    .right{
      margin-left: calc(50% + 20px);
      transform: translateX(-50%);
    }
    .left{
      margin-left: calc(50% - 20px);
      transform: translateX(-50%);
    }
    #border{
      height: 100%;
      border: 1px solid yellow;
      width: 25%;
      margin: auto;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
    }
    <div class="parent">
      <div id="auto" class="child">
        auto margin
      </div>
      <div id="auto-right" class="child right">
        auto + pushed to right
      </div>
      <div class="child left">
        auto + pushed to left
      </div>
      <div id="border"></div>
    </div>

    Increase or decrease the plus minus value of left and right to understand it correctly.

    Note: using the below code

    .right{
      margin-left: calc(50% + 20px);
      transform: translateX(-50%);
    }
    

    is same as using:

    .right{
      margin-right: calc(50% - 20px);
      transform: translateX(-50%);
    }
    

    for this concept.

    Also note that the question is related to some percentage calculation plus minus desired shift. So in this answer, it has both calc and transform is used. If you exactly require to shift at middle then we could just use (without margin-left or margin-right):

    transform: translateX(-20px)
    

    The answer is provided with 50% calc but the question was requiring to use some percentage like calc(20% - 20px).