Я знаю, что название этого вопроса глупо, но я не мог придумать ничего лучшего.Я часами искал эту тему, но я либо что-то искал неправильно, либо я упустил некоторые основы CSS.
У меня есть контейнер div с фоновым изображением 40x40px, расположенным в левом верхнем углу.угол.Я хочу выровнять верх текста из тега h2 с верхом этого фонового изображения, что я пытался сделать следующим образом.
HTML:
<div id="container">
<h2 id="title">Lorem</h2>
</div>
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
background: url('test-icon.png') top left no-repeat;
margin: 200px auto; /* To center the container on the page*/
min-height: 50px;
padding-left: 50px; /* To prevent the text from "colliding with the background-image"*/
width: 300px;
}
#title {
font-family: "Arial Black", Arial, Helvetica, sans-serif;
font-size: 1.3em;
text-transform: uppercase;
}
Я использовал сброс CSS Эрика Мейерса, чтобы избавиться от специфических стилей браузера, но не учел это в приведенном выше коде.
Я создал живой пример
Проблема в том, что фоновое изображение и верхняя часть текста из тега h2 не совпадают - в верхней части тега h2 есть небольшое «поле».Это поле, похоже, меняется в зависимости от размера шрифта.Когда я использую инспектор Google Chromes, он говорит мне, что поля и отступы тегов h2 и div равны 0px.Поскольку браузеры отображают шрифты по-разному, я не хочу возиться с отрицательными полями, если это нарушает макет.Есть ли способ «безопасно» избавиться от этой наценки?Чтобы было совершенно ясно, что я хочу достичь, это это .