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!
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.
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.
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...
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.
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
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With