EditorConfig properties for Css: Spaces

Last modified: 03 August 2022

tip

Formatting preferences listed on this page can be also configured visually, on the Code Editing | Css | Formatting Style | Spaces page of ReSharper options (Alt+R, O).

Selector

Around operator

Property names:

[resharper_]css_space_around_selector_operator, [resharper_]space_around_selector_operator

Possible values:

true | false

Examples:

true

div > #error { color: red }

false

div>#error { color: red }

Before comma

Property names:

[resharper_]css_space_before_selector_comma, [resharper_]space_before_selector_comma

Possible values:

true | false

Examples:

true

#error , .error { color: red }

false

#error, .error { color: red }

After comma

Property names:

[resharper_]css_space_after_selector_comma, [resharper_]space_after_selector_comma

Possible values:

true | false

Examples:

true

#error, .error { color: red }

false

#error,.error { color: red }

Attribute selector

Within brackets

Property names:

[resharper_]css_space_within_attribute_match_brackets, [resharper_]space_within_attribute_match_brackets

Possible values:

true | false

Examples:

true

[ href$='.link' ] { color: blue }

false

[href$='.link'] { color: blue }

Around match operator

Property names:

[resharper_]css_space_around_attribute_match_operator, [resharper_]space_around_attribute_match_operator

Possible values:

true | false

Examples:

true

[href $= '.link'] { color: blue }

false

[href$='.link'] { color: blue }

Media query

Within parentheses

Property names:

[resharper_]css_space_within_media_parentheses, [resharper_]space_within_media_parentheses

Possible values:

true | false

Examples:

true

@media ( ratio: 4/3 ), ( ratio: 3/4 ) {
    .error { color: red; }
}

false

@media (ratio: 4/3), (ratio: 3/4) {
    .error { color: red; }
}

Before colon

Property names:

[resharper_]css_space_before_media_colon, [resharper_]space_before_media_colon

Possible values:

true | false

Examples:

true

@media (ratio : 4/3), (ratio : 3/4) {
    .error { color: red; }
}

false

@media (ratio: 4/3), (ratio: 3/4) {
    .error { color: red; }
}

After colon

Property names:

[resharper_]css_space_after_media_colon, [resharper_]space_after_media_colon

Possible values:

true | false

Examples:

true

@media (ratio: 4/3), (ratio: 3/4) {
    .error { color: red; }
}

false

@media (ratio:4/3), (ratio:3/4) {
    .error { color: red; }
}

Before comma

Property names:

[resharper_]css_space_before_media_comma, [resharper_]space_before_media_comma

Possible values:

true | false

Examples:

true

@media (ratio: 4/3) , (ratio: 3/4) {
    .error { color: red; }
}

false

@media (ratio: 4/3), (ratio: 3/4) {
    .error { color: red; }
}

After comma

Property names:

[resharper_]css_space_after_media_comma, [resharper_]space_after_media_comma

Possible values:

true | false

Examples:

true

@media (ratio: 4/3), (ratio: 3/4) {
    .error { color: red; }
}

false

@media (ratio: 4/3),(ratio: 3/4) {
    .error { color: red; }
}

Within block

Property names:

[resharper_]css_space_within_media_block, [resharper_]space_within_media_block

Possible values:

true | false

Examples:

true

@media (ratio: 4/3), (ratio: 3/4) {
    .error { color: red; }
}

false

@media (ratio: 4/3), (ratio: 3/4) {
    .error { color: red; }
}

Property

Within block

Property names:

[resharper_]css_space_within_property_block, [resharper_]space_within_property_block

Possible values:

true | false

Examples:

true

.error {
    color: red;
    padding: 0 0 0 0;
}

false

.error {
    color: red;
    padding: 0 0 0 0;
}

Before colon

Property names:

[resharper_]css_space_before_property_colon, [resharper_]space_before_property_colon

Possible values:

true | false

Examples:

true

.error {
    color : red;
    padding : 0 0 0 0;
}

false

.error {
    color: red;
    padding: 0 0 0 0;
}

After colon

Property names:

[resharper_]css_space_after_property_colon, [resharper_]space_after_property_colon

Possible values:

true | false

Examples:

true

.error {
    color: red;
    padding: 0 0 0 0;
}

false

.error {
    color:red;
    padding:0 0 0 0;
}

Before semicolon

Property names:

[resharper_]css_space_before_property_semicolon, [resharper_]space_before_property_semicolon

Possible values:

true | false

Examples:

true

.error {
    color: red ;
    padding: 0 0 0 0 ;
}

false

.error {
    color: red;
    padding: 0 0 0 0;
}

After semicolon

Property names:

[resharper_]css_space_after_property_semicolon, [resharper_]space_after_property_semicolon

Possible values:

true | false

Examples:

true

.error {
    color: red;
    padding: 0 0 0 0;
}

false

.error {
    color: red;
    padding: 0 0 0 0;
}

Function

Within parentheses

Property names:

[resharper_]css_space_within_function_parentheses, [resharper_]space_within_function_parentheses

Possible values:

true | false

Examples:

true

.black { color: rgb( 1, 1, 1 ) }

false

.black { color: rgb(1, 1, 1) }

Before comma

Property names:

[resharper_]css_space_before_function_comma, [resharper_]space_before_function_comma

Possible values:

true | false

Examples:

true

.black { color: rgb(1 , 1 , 1) }

false

.black { color: rgb(1, 1, 1) }

After comma

Property names:

[resharper_]css_space_after_function_comma, [resharper_]space_after_function_comma

Possible values:

true | false

Examples:

true

.black { color: rgb(1, 1, 1) }

false

.black { color: rgb(1,1,1) }

Expression

Within parentheses

Property names:

[resharper_]css_space_within_expression_parentheses, [resharper_]space_within_expression_parentheses

Possible values:

true | false

Examples:

true

p { width: calc(100% / ( 3 - 2 * 1 + 2 ) * 2px); }

false

p { width: calc(100% / (3 - 2 * 1 + 2) * 2px); }

Around operator

Property names:

[resharper_]css_space_around_operator, [resharper_]space_around_operator

Possible values:

true | false

Examples:

true

p { width: calc(100% / (3 - 2 * 1 + 2) * 2px); }

false

p { width: calc(100%/(3-2*1+2)*2px); }

Before comma

Property names:

[resharper_]css_space_before_comma, [resharper_]space_before_comma

Possible values:

true | false

Examples:

true

p { font: 87.5%/1.429 Arial , sans-serif }

false

p { font: 87.5%/1.429 Arial, sans-serif }

After comma

Property names:

[resharper_]css_space_after_comma, [resharper_]space_after_comma

Possible values:

true | false

Examples:

true

p { font: 87.5%/1.429 Arial, sans-serif }

false

p { font: 87.5%/1.429 Arial,sans-serif }

Before separator

Property names:

[resharper_]css_space_before_separator, [resharper_]space_before_separator

Possible values:

true | false

Examples:

true

@media (ratio: 4 /3) {
    p { font: 87.5% /1.429 Arial, sans-serif }
}

false

@media (ratio: 4/3) {
    p { font: 87.5%/1.429 Arial, sans-serif }
}

After separator

Property names:

[resharper_]css_space_after_separator, [resharper_]space_after_separator

Possible values:

true | false

Examples:

true

@media (ratio: 4/ 3), (ratio: 3/ 4) {
    p { font: 87.5%/ 1.429 Arial, sans-serif }
}

false

@media (ratio: 4/3), (ratio: 3/4) {
    p { font: 87.5%/1.429 Arial, sans-serif }
}