text-box-edge
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The text-box-edge
CSS property specifies an amount of space to trim from a text element's block container.
Vertical spacing differs between fonts, making consistent typesetting historically challenging on the web. The text-box-edge
property — along with its counterpart property text-box-trim
, which specifies which edge(s) to trim space from — makes consistent typesetting easier to achieve. The text-box-edge
property has no effect if text-box-trim
is not set or is set to none
.
Note:
The text-box
shorthand property can be used to specify the text-box-edge
and text-box-trim
values in a single declaration.
Syntax
/* Single keyword */
text-box-edge: auto;
text-box-edge: text;
/* Two <text-edge> values */
text-box-edge: text text;
text-box-edge: text alphabetic;
text-box-edge: cap alphabetic;
text-box-edge: ex text;
/* Global values */
text-box-edge: inherit;
text-box-edge: initial;
text-box-edge: revert;
text-box-edge: revert-layer;
text-box-edge: unset;
Value
The text-box-edge
property value is specified as auto
or a <text-edge>
value:
auto
-
The default value. Equivalent to the
text-edge
valuetext
. <text-edge>
-
One or two separate keywords representing over and under edge positions to trim the text element's block container to.
- If two values are specified, the first value specifies the trimming behavior to apply to the block-start (over) edge of the text, and the second value specifies the trimming behavior to apply to the block-end (under) edge of the text.
- Valid over edge trimming values:
text
,cap
, andex
. - Valid under edge trimming values:
text
andalphabetic
.
- Valid over edge trimming values:
- If one value is specified, it specifies the over and under edge trimming behavior. At the time of writing, the only valid single value is
text
.
- If two values are specified, the first value specifies the trimming behavior to apply to the block-start (over) edge of the text, and the second value specifies the trimming behavior to apply to the block-end (under) edge of the text.
Description
The height of text-only content is relative to the height of the font. In digital font files, the height contains all characters, including capital letters, ascenders, descenders, etc. Different fonts have different base line-heights, meaning that lines of text with the same font-size
will produce line boxes of differing heights, affecting the appearance of spacing between lines.
The text-box-edge
property allows you to trim space from the start and/or end edge of the text's block container. This can include the leading at the text's block-start edge and block-end edges and the spacing defined inside the font (as described above). It does this by specifying a <text-edge>
value that indicates the over edge and under edge to trim the space to.
Which edge(s) to trim space from is specified using the text-box-trim
property. For example, you can choose to trim space from the over edge or the under edge of the text's block container, or both.
These properties make it much easier to control text spacing in the block direction.
Formal definition
Initial value | auto |
---|---|
Applies to | Block containers and inline boxes |
Inherited | no |
Computed value | the specified keyword |
Animation type | discrete |
Formal syntax
Examples
Basic text-box-edge
usage
The most common text-box-edge
values you'll use for horizontal writing-mode
languages such as English or Arabic are cap alphabetic
and ex alphabetic
. The cap
value trims the over edge of the text element's block container to the top of the capital letters, whereas ex
trims the over edge to the font's x-height (the top edge of the short lower-case letters). In each case, alphabetic
trims the under-edge flush with the text baseline.
In this example, we demonstrate the effect of both of these common values, on two <p>
elements. Additionally, a text-box-trim
value of trim-both
has been set on both of them, so that their start and end edges are trimmed.
p {
text-box-trim: trim-both;
border-top: 5px solid magenta;
border-bottom: 5px solid magenta;
}
.one {
text-box-edge: cap alphabetic;
}
.two {
text-box-edge: ex alphabetic;
}
Result
The output is as follows. Note how we've included a top and bottom border on each paragraph, so that you can see how the space has been trimmed in each case.
Interactive text-box-edge
value comparison
For a complete interactive text-box-edge
example, see the text-box-trim
page.
Specifications
Specification |
---|
CSS Inline Layout Module Level 3 # text-box-edge |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-box-edge | ||||||||||||
auto |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
See also
text-box
,text-box-trim
<text-edge>
data type- CSS inline layout module
- CSS text-box-edge on developer.chrome.com (2025)