![The whole lot You Must Know Concerning the Hole After the Record Marker | CSS-Tips The whole lot You Must Know Concerning the Hole After the Record Marker | CSS-Tips](https://techtoguide.com/wp-content/uploads/2023/10/Everything-You-Need-to-Know-About-the-Gap-After-the-768x403.jpeg)
[ad_1]
I used to be studying “Inventive Record Styling” on Google’s net.dev weblog and observed one thing odd in one of many code examples within the ::marker
part of the article. The built-in listing markers are bullets, ordinal numbers, and letters. The ::marker
pseudo-element permits us to type these markers or change them with a customized character or picture.
::marker {
content material: url('/marker.svg') ' ';
}
The instance that caught my consideration makes use of an SVG icon as a customized marker for the listing gadgets. However there’s additionally a single area character (" "
) within the CSS worth subsequent to the url()
operate. The aim of this area appears to be to insert a spot after the customized marker.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/svg-marker-and-space.png?resize=1373%2C843&ssl=1)
Once I noticed this code, I instantly puzzled if there was a greater method to create the hole. Appending an area to content material
feels extra like a workaround than the optimum answer. CSS offers margin
and padding
and different commonplace methods to area out parts on the web page. May none of those properties be used on this state of affairs?
First, I attempted to substitute the area character with a correct margin:
::marker {
content material: url('/marker.svg');
margin-right: 1ch;
}
This didn’t work. Because it seems, ::marker
solely helps a small set of largely text-related CSS properties. For instance, you may change the font-size
and shade
of the marker, and outline a customized marker by setting content material
to a string or URL, as proven above. However the margin
and padding
properties are not supported, so setting them has no impact. What a disappointment.
May it actually be {that a} area character is the one method to insert a spot after a customized marker? I wanted to seek out out. As I researched this subject, I made just a few attention-grabbing discoveries that I’d prefer to share on this article.
Including padding and margins
First, let’s affirm what margin
and padding
do on the <ul>
and <li>
parts. I’ve created a take a look at web page for this objective. Drag the related sliders and observe the impact on the spacing on either side of the listing marker. Tip: Use the Reset button liberally to reset all controls to their preliminary values.
Observe: Browsers apply a default padding-inline-left
of 40px
to <ol>
and <ul>
parts. The logical padding-inline-left
property is equal to the bodily padding-left
property in writing programs with a left-to-right inline route. On this article, I’m going to make use of bodily properties for the sake of simplicity.
As you may see, padding-left
on <li>
will increase the hole after the listing marker. The opposite three properties management the spacing to the left of the marker, in different phrases, the indentation of the listing merchandise.
Discover that even when the listing merchandise’s padding-left
is 0px
, there’s nonetheless a minimal hole after the marker. This hole can’t be decreased with margin
or padding
. The precise size of the minimal hole relies on the browser.
![First three properties: UL margin-left, UL padding-left, LI margin-left. Fourth property: LI padding-left.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/margin-padding-position-outside.png?resize=1417%2C890&ssl=1)
To sum up, the listing merchandise’s content material is positioned at a browser-specific minimal distance from the marker, and this hole will be additional elevated by including a padding-left
to <li>
.
Subsequent, let’s see what occurs after we place the marker inside the listing merchandise.
Transferring the marker contained in the listing merchandise
The list-style-position
property accepts two key phrases: outdoors
, which is the default, and inside
, which strikes the marker contained in the listing merchandise. The latter is beneficial for creating designs with full-width listing gadgets.
![A grocery list. Each item has a thin bottom border that extends from the left to the right edge of the list.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/list-marker-position-inside.png?resize=1608%2C918&ssl=1)
If the marker is now inside the listing merchandise, does this imply that padding-left
on <li>
not will increase the hole after the marker? Let’s discover out. On my take a look at web page, activate list-style-position: inside
by way of the checkbox. How are the 4 padding
and margin
properties affected by this variation?
As you may see, padding-left
on <li>
now will increase the spacing to the left of the marker. Which means we’ve misplaced the flexibility to extend the hole after the marker. On this state of affairs, it could be helpful to have the ability to add margin-right
to the ::marker
itself, however that doesn’t work, as we’ve established above.
![The four properties: UL margin-left, UL padding-left, LI margin-left, LI padding-left.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/margin-padding-position-inside.png?resize=1417%2C889&ssl=1)
Moreover, there’s a bug in Chromium that causes the hole after the marker to triple after switching to inside
positioning. By default, the size of the hole is about one-third of the textual content dimension. So at a default font-size
of 16px
, the hole is about 5.5px
. After switching to inside
, the hole grows to the total 16px
in Chrome. This bug impacts the disc
, circle
, and sq.
markers, however not ordinal quantity markers.
The next picture reveals the default rendering of out of doors and inside-positioned listing markers throughout three main browsers on macOS. On your comfort, I’ve horizontally aligned all listing gadgets on their markers to make it simpler to check the variations in hole sizes.
![Six list items with varying gaps between the marker and text.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/outside-inside-gap-difference.png?resize=555%2C385&ssl=1)
To sum up, switching to list-style-position: inside
introduces two issues. We are able to not enhance the hole by way of padding-left
on <li>
, and the hole dimension is inconsistent between browsers.
Lastly, let’s see what occurs after we change the default listing marker with a customized marker.
Switching to a customized marker
There are two methods to outline a customized marker:
list-style-type
andlist-style-image
propertiescontent material
property on the::marker
pseudo-element
The content material
property is extra highly effective. For instance, it permits us to make use of the counter()
operate to entry the listing merchandise’s ordinal quantity (the implicit list-item
counter) and enhance it with customized strings.
Sadly, Safari doesn’t assist the content material
property on ::marker
but (WebKit bug). Because of this, I’m going to make use of the list-style-type
property to outline the customized marker. You’ll be able to nonetheless use the ::marker
selector to type the customized marker declared by way of list-style-type
. That side of ::marker
is supported in Safari.
Any Unicode character can doubtlessly function a customized listing marker, however solely a small set of characters even have “Bullet” of their official title, so I believed I’d compile them right here for reference.
Character | Identify | Code level | CSS key phrase |
---|---|---|---|
• | Bullet | U+2022 |
disc |
‣ | Triangular Bullet | U+2023 |
|
⁃ | Hyphen Bullet | U+2043 |
|
⁌ | Black Leftwards Bullet | U+204C |
|
⁍ | Black Rightwards Bullet | U+204D |
|
◘ | Inverse Bullet | U+25D8 |
|
◦ | White Bullet | U+25E6 |
circle |
☙ | Reversed Rotated Floral Coronary heart Bullet | U+2619 |
|
❥ | Rotated Heavy Black Coronary heart Bullet | U+2765 |
|
❧ | Rotated Floral Coronary heart Bullet | U+2767 |
|
⦾ | Circled White Bullet | U+29BE |
|
⦿ | Circled Bullet | U+29BF |
Observe: The CSS sq.
key phrase doesn’t have a corresponding “Bullet” character in Unicode. The character that comes closest is the Black Small Sq. (▪️) emoji (U+25AA
).
Now let’s see what occurs after we change the default listing marker with list-style-type: "•"
(U+2022
Bullet). This is similar character because the default bullet, so there shouldn’t be any main rendering variations. On my take a look at web page, activate the list-style-type
possibility and observe any modifications to the marker.
As you may see, there are two important modifications:
- There is no such thing as a longer a minimal hole after the marker.
- The bullet has turn out to be smaller, as if it had been rendered at a smaller
font-size
.
In line with CSS Counter Types Degree 3, the default listing marker (disc
) ought to be “much like • U+2022
BULLET”. Evidently browsers enhance the dimensions of the default bullet to make it extra legible. Firefox even makes use of a particular font, -moz-bullet-font
, for the marker.
![:marker selected in the inspector. Fonts used: -moz-bullet-font.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/01/firefox-moz-bullet-font.png?resize=1024%2C612&ssl=1)
Can the small dimension drawback be mounted with CSS? On my take a look at web page, activate marker styling and observe what occurs while you change the font-size
, line-height
, and font-family
of the marker.
As you may see, rising the font-size
causes the customized marker to turn out to be vertically misaligned, and this can’t be corrected by lowering the line-height
. The vertical-align
property, which might simply repair this drawback, is just not supported on ::marker
.
However did you discover that altering the font-family
may cause the marker to turn out to be larger? Strive setting it to Tahoma
. This might doubtlessly be a good-enough workaround for the small-size drawback, though I haven’t examined which font works finest throughout the main browsers and working programs.
You might also have observed that the Chromium bug doesn’t happen anymore while you place the marker contained in the listing merchandise. Which means a customized marker can function a workaround for this bug. And this leads me to the principle drawback, and the rationale why I began researching this subject. In the event you outline a customized marker and place it contained in the listing merchandise, there is no such thing as a hole after the marker and no method to insert a spot by commonplace means.
- There is no such thing as a minimal hole after customized markers.
::marker
doesn’t assistpadding
ormargin
.padding-left
on<li>
doesn’t enhance the hole, because the marker is positionedinside
.
Abstract
Right here’s a abstract of all the important thing info that I’ve talked about within the article:
- Browsers apply a default
padding-inline-start
of40px
to<ul>
and<ol>
parts. - There’s a minimal hole after built-in listing markers (
disc
,decimal
, and many others.). There is no such thing as a minimal hole after customized markers (string or URL). - The size of the hole will be elevated by including a
padding-left
to<ul>
, however provided that the marker is positioned outdoors the listing merchandise (the default mode). - Customized string markers have a smaller default dimension than built-in markers. Altering the
font-family
on::marker
can enhance their dimension.
Conclusion
Trying again on the code instance from the start of the article, I believe I perceive now why there’s an area character within the content material
worth. There may be simply no higher method to insert a spot after the SVG marker. It’s a workaround that’s wanted as a result of no quantity of margin
and padding
can create a spot after a customized marker that’s positioned contained in the listing merchandise. A margin-right
on ::marker
might simply do it, however that isn’t supported.
Till ::marker
provides assist for extra properties, net builders will typically haven’t any selection however to cover the marker and emulate it with a ::earlier than
pseudo-element. I had to try this myself just lately as a result of I couldn’t change the marker’s background-color
. Hopefully, we received’t have to attend too lengthy for a extra highly effective ::marker
pseudo-element.
[ad_2]