Странные отступы вокруг создания текста, содержащие div слишком большой

Question

Странные отступы вокруг создания текста, содержащие div слишком большой

0

Я изучал и работал так усердно, чтобы исправить такую странную проблему. У меня есть div, который должен содержать некоторый текст. Этот div должен иметь возможность изменять размер с помощью этого текста, так что, если есть две строки текста, div становится выше и т.д. Все, что кажется хорошо работает, но почему-то там что-то вроде дополнения добавляется в начало текста и в нижней части текста. Я не могу найти, что вызывает это дополнение, и я действительно хочу, чтобы div соответствовал тексту более компактно. Вот образ того, о чем я говорю:

http://i.imgur.com/ZblaLJX.png

Светло-синий ящик должен быть короче по высоте, чтобы он более точно соответствовал тексту. Вот мой CSS-код для этого div:

.captionCSS {
    max-width:70%;
    margin-top:10px; 
    margin-bottom:20px; 
    padding-left:5px; 
    padding-right:5px;
    padding-top:0px; 
    padding-bottom:0; 
    background-color:#aef7f8; 
    overflow:hidden; 
    color:black; 
}

Я перепутал все поля и paddings, установив их на ноль, а затем снова установив их, и ничего не работает. Высота линии наследуется от другого div и составляет 18px, а размер шрифта - 12px, и я попытался уменьшить высоту линии, но это не повлияло на верхнее и нижнее заполнение/пробел.

Кроме того, когда текст занимает две строки, он становится немного хуже в том, что на стороне есть дополнительный бит дополнения, от которого я хочу избавиться:

http://i.imgur.com/Ecdxdtq.png

Так что да, это моя проблема. В идеале я хотел бы 5px разрыв от края div до верхней части текста, так что если это все равно, сделайте это, пожалуйста, дайте мне знать! Большое спасибо за Вашу помощь!

user2015125 20 сен. 2013, в 00:06

Источник

Теги:

html

css

text

padding

2 ответа

Ещё вопросы

Marc Audet · Answer 1 · 2013-09-19T20-06-00.000Z

Вы можете попробовать следующее.

Если ваш код выглядит примерно так:

<p>Some text with <span class="captionCSS">highlighted text</span>.</p>

примените следующие правила CSS:

p {
    background-color: gray;
    padding: 5px;
}
.captionCSS {
    max-width:70%;
    padding: 0 5px;
    background-color:#aef7f8; 
    display: inline-block;
    line-height: 1.00;
}

Если вы установите display: inline-block в оболочку заголовка, то значение высоты строки будет иметь некоторый эффект.

line-height: 1.00 заставляет высоту линии быть того же размера, что и размер шрифта для элемента. Если вы установите значение меньше 1, вы получите более плотную посадку, но вы также можете закрепить задвижки и descenders определенных символов в зависимости от шрифта.

См. Демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/2cyaF/

Meximize · Answer 2 · 2013-09-19T21-04-00.000Z

Без HTML я не могу быть уверен, но сначала я предполагаю, что в тексте есть элемент уровня родительского блока, который уже имеет правила стилизации. (например: <hX> или <p>)

Вы можете очистить эти стили с помощью css, выполнив что-то вроде этого:

h1,h2,h3,p{
    padding:0;
    margin:0;
}

Вот несколько примеров использования вашего стиля: http://jsfiddle.net/JTrWL/