Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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!

like image 727
Michael Swarts Avatar asked Mar 12 '16 02:03

Michael Swarts


People also ask

What is the margin CSS shorthand property?

The margin CSS shorthand property sets the margin area on all four sides of an element. This property is a shorthand for the following CSS properties: The margin property may be specified using one, two, three, or four values. Each value is a <length>, a <percentage>, or the keyword auto.

What is the use of +margin shorthand?

margin shorthand property can be applied to all elements except elements with table display types other than table-caption, table and inline-table. With reference to the width of the containing block. visual. Either a percentage or absolute value.

What is the correct syntax for margin?

Syntax. When one value is specified, it applies the same margin to all four sides. When two values are specified, the first margin applies to the top and bottom, the second to the left and right. When three values are specified, the first margin applies to the top, the second to the left and right, the third to...

How to set margins in CSS?

CSS margin shorthand property sets all the four margins (top, right, bottom, left) margin of a box. width : Width of the margin (a). The following table shows the values used to set width: Using px, cm, em units, a fixed width is set. Using percentage sign followed by a number, a percentage value is set.


2 Answers

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
like image 100
Stuart Avatar answered Nov 14 '22 23:11

Stuart


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>
like image 24
dippas Avatar answered Nov 15 '22 00:11

dippas