'Can I use shorthand margin syntax to change just left and right values?

Can I use the shorthand margin syntax if I want to add margin-left: auto and margin-right: auto while leaving the margin-top and margin-bottom alone?

The basic idea:

.center {
    margin: dont-specify auto;
}

Thanks!

Edit: In short, the answer is that there is no such keyword. For clarity, by 'dont-specify', I did not mean 'remove-specification', 'roll-back-specification' or 'specify-with-lower-specificity'. I meant, 'this rule should not specify a new value'. I take responsibility for being unclear. It is indeed very easy to interpret 'dont-specify' a multitude of different ways! Thanks for everyone's answers!

htmlcss


Solution 1:[1]

Not in shorthand no. Possible values are:

margin:10px; // top/right/bottom/left
margin:10px 10px; // top/bottom left/right
margin:10px 10px 10px; // top right/left bottom
margin:10px 10px 10px 10px; // top right bottom left

Solution 2:[2]

OP comment

If the element being styled has margin-top: 20px and margin-bottom: 10px at the moment, won't using "auto", overwrite that?

A: yes you can, It all depends on your specificity.

Snippet

body {
  margin: 0
}
main {
  border: solid green
}
div,
span,
article,
section {
  display: block; /* needed for span */
  margin-left: 20px;
  margin-right: 10px;
  width: 100px;
  height: 100px;
  border: dashed red 1px
}
/* override margin-left/right */
[class*="class-"] {
  margin: auto; /* shorthand for top right bottom left - or - top/bottom right/left */
}
<main>
  <span class="class-1"></span>
  <div class="class-2"></div>
  <article class="class-3"></article>
  <section class="class-4"></section>
</main>

Solution 3:[3]

theoraticly , there will be options somedays :

https://drafts.csswg.org/css-cascade/#defaulting (about inherit, unset, initial & revert)

but seems not implemented anywhere yet :( , so you still need to write :

margin-left : auto;
margin-right: auto;

below test with revert, feel free to copy and swap revert with the 3 other values. 

div {
  float: left;
  width: 50%;
  border: solid;
  box-sizing: border-box;
  background: orange
}
p {
  width: 80%;
  margin: revert auto;
  border: solid;
  background: turquoise
}
div:first-child p:first-child {
  margin: auto;
  background: tomato;
}
div + div p:last-child {
  margin-left: auto;
  margin-right: auto;
  background: lime;
}
<div>
  <p>margin:0;</p>
  <p>margin test</p>
  <p>margin test</p>
  <p>margin test</p>
</div>
<div>
  <p>margin test</p>
  <p>margin test</p>
  <p>margin test</p>
  <p>margin-left:auto; margin-right:auto;</p>
</div>

Solution 4:[4]

For those who are still looking for an answer, you can use margin-inline property:

.center {
    margin-inline: auto;
}

Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline.

Solution 5:[5]

.center {margin:0 auto;}

This is assuming you know your top and bottom margins are the same value. the first value is your top and bottom. the second is your right and left.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Stuart
Solution 2
Solution 3
Solution 4 David Nanyan
Solution 5 Anastasiou Design

Related Questions