using calc with auto margin

问题

I wanted to use margin-right to auto + some pixels by using css3 calc() but seems the statement is wrong.

selector{margin: calc(auto + 5px);

So, how can use so that it can take auto margin and plus fixed pixels margin?

Something like this!

回答1:

From MDN :

The calc() CSS function can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is required. With calc(), you can perform calculations to determine CSS property values.

You cannot use auto there, as it's not a valid value for calc().

Grammar for calc()

term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* ]
  | STRING S* | IDENT S* | URI S* | hexcolor | function | math
  ;

For more information, refer the Docs

As you commented that you want to center the div but you also want a 5px margin on the right than you can achieve it by using text-align: center; on the parent element and make the child div elements to display: inline-block;

Demo

Output

div.wrap {
    text-align: center;
}

div.wrap div {
    display: inline-block;
    height: 100px;
    width: 100px;
    color: #fff;
}

div.wrap div.with_margin {

    margin-right: 5px;
    background: #f00;
}

div.wrap div.without_margin { 
    background: #000;
}

回答2:

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).

来源：https://stackoverflow.com/questions/21275565/using-calc-with-auto-margin

标签

css

css3

css-calc