margin-left don't applies to ::first-line

[Akindin]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left

What specific section or headline is this issue about?

Formal Definition applies to

What information was incorrect, unhelpful, or incomplete?

margin-left doesn't work on ::first-line pseudoelement

What did you expect to see?

first line of text to have indentation

Do you have any supporting links, references, or citations?

https://codepen.io/Akindin/pen/MWxmqVg

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/margin-left
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/margin-left/index.md
• Last commit: 5e7d1f9
• Document last modified: 2023-07-18T00:16:24.000Z

[Akindin]

Same with margin-right

[MohammedAslam106]

The following properties apply to the ::first-line pseudo-element:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

We need to change the applies to section.

Source: https://www.w3schools.com/css/css_pseudo_elements.asp

[ferdnyc]

Indeed; the behavior can be confusing, too, because margin properties do apply to ::first-letter (as the documentation claims), just not ::first-line.

The content of Formal Definition sections is auto-generated from data in the mdn/data repo, specifically (in this case) https://github.com/mdn/data/blob/main/css/properties.json which does (incorrectly) claim, for margin-left:

   "alsoAppliesTo": [ 
     "::first-letter", 
     "::first-line" 
   ], 

That should just be:

   "alsoAppliesTo": [ 
     "::first-letter"
   ],

I'll correct the margin-{left,right,top,bottom} definitions in that data, check for any other properties that claim ::first-line support when they shouldn't, and open a PR in mdn/data to get that fixed. Thanks, @Akindin !

[wbamberg]

I wonder why though, the spec for :first-line says:

The following CSS properties apply to a ::first-line pseudo-element:
...
any other properties defined to apply to ::first-line by their respective specifications

...and the spec for margin says:

All properties in this module apply to the ::first-line and ::first-letter pseudo-elements.

So is this nonstandard? (though it seems like Firefox, Chrome, and Safari all don't support it)

[ferdnyc]

@wbamberg Fair question!

I think the definition of ::first-line in [SELECTORS-3] may be the overriding one, and it doesn't mention any such delegation. Only:

The ::first-line pseudo-element is similar to an inline-level element, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element: font properties, color property, background properties, ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘text-transform’, ‘line-height’. UAs may apply other properties as well.

[ferdnyc]

(Or, well, not overriding, but what's implemented at the moment. [CSS-PSEUDO-4] perhaps isn't implemented in the browsers yet?)

[ferdnyc]

CanIUse entry for ::first-line also cites SELECTORS-3 as the spec that defines it.