CODEWITHSUNDEEP
htmlcss
MonkeyBonkey
MonkeyBonkey

Reputation: 47851

change vertical highlight area of <mark> tag

In HTML how can I change the padding/height of the colored in area of a <mark> tag. With my roboto slab font in a standard bootstrap 2 jumbotron h1 the highlighted area is too tall and overlaps the line above, and it has no padding on the width.

http://jsfiddle.net/Uf3Cq/5/

The bootstrap jumbotron sets a line-height of 1. It looks like I can adjust that to 1.3 to make it not overlap, but I'm curious on what I can do to make the colored area not so high as well. It looks like there is some headroom there in the vertical spacing that could be trimmed somewhat.

Upvotes: 2

Views: 5785

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The horizontal padding issue is fairly trivial: just add it, e.g.

mark { padding: 0 0.1em; }

The value of 0.1em should suffice to prevent letters from touching the left or right edge of the colored area, but you can make it bigger, of course. The rule above sets vertical padding to zero, too, but that’s the default.

Whatever you have in vertical direction here is not created by vertical padding, unless you have it set somewhere in your style sheets. Instead, it’s the height of the element’s box. It may slightly vary across browsers, and the computation has intentionally been left browser-specific in CSS specifications. The line-height just sets a lower bound on it.

In my tests, using Roboto Slab from Google Web Fonts, I am unable to see overlapping. In Chrome, the colored area just touches characters on the line above, if the characters have descenders, as in the letter “q”. So I guess you might be referring to colored areas touching each other, if you have mark elements on successive lines. – If you have set line-height, then you would see overlaps, if the line-height value is small, but then the solution should be obvious. Robo

There does not seem to be any clean and simple solution to this, but if you can accept non-wrapping mark elements (i.e., no line break inside a mark element), then you can make them inline boxes and set height on them to a suitably small value, as well as set line-height to the corresponding value:

mark { display: inline-block; 
       height: 1.15em;
       line-height: 1.15; }

(For inline elements, the height property is ignored. For inline block elements, it sets the height of the actual box.)

Upvotes: 1

Related Questions