[css-inline] Add padding for initial-letter

[scottkellum]

css-inline/#sizing-drop-initials

Sometimes a designer may want some padding around an initial letter or drop cap like this example:

Could we add initial-letter-padding to the spec, so that initial-letter-padding: 1 would result in padding equal to one line of text. This is a style that is often found in magazines and it would be convenient for it to be a part of the initial-letter specification.

[Loirooriol]

::first-letter { padding: 1lh } may be close enough.

[faceless2]

The example shown would also work with margin, which we find works really well now - particularly after the resolution in #5119 which effectively the used margin is the intersection of the box margin and shape-margin. I don't know how widely implemented this is yet, but to me it seems to work really well, and gives a lot of control over layout.

[scottkellum]

Thanks @Loirooriol

This code did the trick:

p {
  line-height: 1.3;
}

p::first-letter {
  -webkit-initial-letter: 2 3;
  initial-letter: 2 3;
  padding: 1.3em; /* 1lh is not supported in Safari at this time */
}

@faceless2 block margins seem to be getting collapsed as ::first-letter is inline. This may be an implementation quirk.