Отступ абзаца через CSS
Читая какую-нибудь книгу, газету, журнал да и вообще любой нормальный текст, Вы встречали множество абзацов, причём первая строка каждого из них содержит небольшой отступ. В этой статье я покажу наилучший вариант задания отступов у абзаца через CSS.
Безусловно, любое количество пробелов можно вставить с помощью , тем самым, подобрав необходимый отступ, но, наверняка, Вы понимаете, что данный способ, мягко говоря, неудобный. А решение этой задачи очень простое.
Вы уже должны знать, что в HTML абзац создаётся с помощью тега <p>. Таким образом, каждый абзац должен быть в своём теге <p>. А для создания отступов первой строки каждого абзаца достаточно подключить такой CSS-код:
p {
text-indent: 10px;
}
В данном примере мы сделали отступ в 10 пикселей. Вы можете поиграться с этим значением, чтобы подобрать оптимальный для своего сайта.
Вот таким простым способом Вы можете задать отступ у первых строк любого абзаца в тексте на сайте.
-
Создано 10.10.2011 12:42:01
-
Михаил Русаков
Комментарии (9):
Здравствуйте Михаил, помогите решить проблему со следующим css-кодом: .bam { border: 1px solid black; border-radius: 8px; margin-bottom: 4%; text-align: left; width: 84%; } .bam .author { background-color: White; border-bottom: 1px solid black; border-top-right-radius: 8px; border-top-left-radius: 8px; font-weight: bold; padding:4px; } .bam .text { background-color: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding:4px; } Необходимо, чтобы внутри ".bam .text" переносился текст на другую строчку, если он не умещается на одной строке. Но почему-то он не переносится, а вылезает за пределы блока. Помогите решить эту проблему.
Ответить
Надо в тексте ставить пробелы, тогда он будет переноситься.
Ответить
Спасибо!
Ответить
Здравствуйте Михаил, вы случайно не знаете, как найти выход из следующей ситуации: есть блок, а внутри него еще один блок, и в этот блок, что внутри записывается текст (длина текста заранее не известна). Так вот, как сделать так, чтобы высота блока-родителя зависела от высоты блока внутри него (с текстом)? А то у меня почему-то получается что высота блока-родителя меньше чем высота внутреннего.
Ответить
Все внешние блоки растягиваются по в зависимости от размеров внутренних блоков. Это не надо делать, это уже по умолчанию должно быть.
Ответить
а вы посмотрите: http://progbase.ru/about.php
Ответить
Надо использовать <div style="clear: both;"></div> - поставьте данный блок в разные места и смотрите, что меняется. Как только всё станет в порядке, там его и оставьте.
Ответить
Здравствуйте! Помогите, пожалуйста,в окне этой подсказки при наведении сделать отступы,да и другие стили текста.Чуть-чуть что-то не получается и все.Спасибо заранее. <html> <head> <style type="text/css"> .podskazka{ background-color: #FF6600; padding:0px; border:3px solid #66FFFF; position:absolute; margin: 3px; width: 200px; min-height: 50px; max-height: auto; white-space: normal; border-bottom: 1px dashed #000080; } </style> <script type="text/javascript"> function podskazka() { this.show = function(text,x,y) { var div = document.createElement('div'); div.className = 'podskazka'; div.id = 'metka'; div.innerHTML = text; var koordx = x + 0; var koordy = y + 20; div.style.left = koordx + 'px'; div.style.top = koordy + 'px'; document.body.appendChild(div); } this.hide = function() { var metka = document.getElementById('metka'); metka.parentNode.removeChild(metka); } } var vsplil = new podskazka(); </script> <title>подсказка</title> </head> <body> <span style="cursor: help; font-weight: bold; text-decoration: underline; color: blue;" onmouseover="vsplil.show('Помогите, пожалуйста,в окне этой подсказки при наведении сделать отступы,да и другие стили текста');" onmouseout="vsplil.hide()"> Подсказка</span> и далее по тексту </body> </html>
Ответить
любой отступ делается легко заключаете текст в абзац или в div и задаёте стили для него. padding,допустим что это такое и как задавать рассмотрено в статьях на сайте и в интернете. Проходите по-порядку и поймёте
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.