diff --git a/packages/text-annotator/src/highlight/span/spansRenderer.css b/packages/text-annotator/src/highlight/span/spansRenderer.css
index a67ebf11..9492abd3 100644
--- a/packages/text-annotator/src/highlight/span/spansRenderer.css
+++ b/packages/text-annotator/src/highlight/span/spansRenderer.css
@@ -17,3 +17,8 @@
   border-width: 0;
   border-style: solid;
 }
+
+.r6o-annotation {
+  /* `padding` should grow beyond the `height` and be used as the underline offset */
+  box-sizing: content-box;
+}
diff --git a/packages/text-annotator/src/highlight/span/spansRenderer.ts b/packages/text-annotator/src/highlight/span/spansRenderer.ts
index e644db0c..997acd10 100644
--- a/packages/text-annotator/src/highlight/span/spansRenderer.ts
+++ b/packages/text-annotator/src/highlight/span/spansRenderer.ts
@@ -14,7 +14,7 @@ const computeZIndex = (rect: Rect, all: Rect[]): number => {
   const intersects = (a: Rect, b: Rect): boolean => (
     a.x <= b.x + b.width && a.x + a.width >= b.x &&
     a.y <= b.y + b.height && a.y + a.height >= b.y
-  );
+  )
 
   return all.filter(other => (
     rect !== other &&
@@ -85,7 +85,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
             span.style.borderBottomWidth = `${style.underlineThickness}px`;
 
           if (style.underlineOffset)
-            span.style.height = `${rect.height + style.underlineOffset}px`
+            span.style.paddingBottom = `${style.underlineOffset}px`;
 
           highlightLayer.appendChild(span);
         }
@@ -118,4 +118,4 @@ export const createSpansRenderer = (
   container: HTMLElement,
   state: TextAnnotatorState,
   viewport: ViewportState
-) => createBaseRenderer(container, state, viewport, createRenderer(container));
+) => createBaseRenderer(container, state, viewport, createRenderer(container))