Как сделать привязку к вершине div

Question

Я хочу, чтобы текст был идеально совмещен с изображением. Но текст имеет какую-то комнату с каждой стороны. Это должно быть показано на разных устройствах, поэтому просто hardcoding, например top: -3 px не будет работать.

Есть ли способ сделать текст привязкой к вершине div.

Синяя область является выбор наложения, который показывает DIV, когда я наведите курсор мыши на HTML элемент хром инспектировать:

<div class="content-with-padding"> 
<img src="http://www.slu.se/Global/externwebben/overgripande-slu-bilder/utbildning-bilder/SLU-Karriar/logos/logo_forb_tria.gif" /> 
<span> 
    <div class="medium-title">Title</div> 
    <div class="small-text">Some text</div> 
</span> 

.medium-title { 
    font-size: 17px; 
} 

body { 
    font-family: 'Roboto', sans-serif; 
    margin: 0; 
} 

.small-text { 
    font-size: 14px; 

} 

img { 
    float: left; 
} 

JSFiddle: https://jsfiddle.net/fx314qhh/

Answer 1

top:-3px не будет работать потому что он имеет дело с позиционированием. Скорее всего, вам, вероятно, понадобится использовать padding-top:-3px;. Если это не так, мы должны были бы увидеть код, потому что невозможно ответить, глядя на картину

Answer 2

Попробуйте

line-height: 0 

и регулировать Верхнее поле: значение. Или нижнее значение высоты строки. (например, 1-я высота строки будет относиться к размеру шрифта как 1: 1em)

Sicking to px в этом сценарии - лучший выбор для согласованности между браузерами.

Answer 3

Без кода, будет сложно определить точную проблему, но давайте сделаем снимок.

Весь текст имеет то, что называется line-height, которое представляет собой объем пространства от верхней части шрифта до нижней части шрифта. Большинство шрифтов строятся в прокладке вверху, чтобы сделать несколько строк текста доступными для чтения. CSS позволяет нам это корректировать.

p { 
    line-height: 14px; 
} 

Этот код покажет все <p> элементы имеют в общей сложности line-height из 14px. Если ваш шрифт выше 14px, он будет перекрываться.

Если это не исправить вашу проблему, проблема, вероятно, связана с полем/дополнением.

Answer 4

Try:

.medium-title { 
    font-size: 17px; 
    line-height: 0.8; 
} 

https://jsfiddle.net/fx314qhh/1/