The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

Learn how to use the text-box-trim and text-box-edge properties in CSS to remove unnecessary whitespace above and below the content in text boxes. These properties are accessible via a feature flag in Chrome 128+ and Safari 16.4+, and help streamline design consistency by eliminating unwanted leading. Understand how to specify trimming from different edges and heights to achieve precise spacing and alignment without cumbersome calculations.

Two CSS Properties for Trimming Text Box Whitespace

Trim above the x-height and below the alphabetic baseline

<p>Daniel nails these down nicely! Adam Argyle’s got some ideas about how the properties might be used with demos. <a href="https://nerdy.dev/text-box-ftw" target="_blank" rel="noopener nofollow">https://nerdy.dev/text-box-ftw</a></p>


<p>Can this be achieved by setting margin to 0?</p>
