I'm struggling to style a small block of text within its element perfectly. Despite my efforts, there always seems to be unnecessary space in front and below the words. One workaround I found was adjusting the line height to remove the bottom gap, but this feels like a messy solution as it depends on whether the browser decides to use 'arial' or 'helvetica' (I've set the font type as 'sans serif') which could potentially mess up any alignment I have achieved.
CSS
html, body {
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Sans-Serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
#title {
font-size: 36px;
font-weight: bold;
background-color: red;
display: inline-block;
}
HTML
<!DOCTYPE HTML>
<html>
<body>
<div id="header">
<ul id="title">
<li>
Test title
</li>
</ul>
</div>
</body>
</html>
This is what currently happens:
This is what I would like to happen:
JSFiddle: