Отступы в | PHPClub
SonyEricsson
Новичок
- #1
Отступы в <span>
Вот пример небольшого кода:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<title>Web-портал абонента</title>
<meta http-equiv=»content-type» content=»text/html; charset=windows-1251″>
<STYLE TYPE=»text/css»>
body { padding: 0; margin: 0; }
</STYLE>
</head>
<body>
12123123 12312 3 434 34 34 343 4 3 Бесплатно загрузить эту программу можно <a target=»_blank» href=»http://www.adobe.com/products/acrobat/readstep2.html»>здесь</a>.</span></body>
</html>
Вопрос: если ширину окна браузера уменишить так, чтобы она была меньше длины строки, при этом часть строки перенесется на следующую строку, почему перенесенная часть строки начинается без отступа, хотя padding установлен в 5px, первая строка имеет отступ. почему отступ распространяется не на весь span?
Vital_N
Новичок
- #2
SonyEricsson
кури доки по html
насчет block элементов и inline )
SonyEricsson
Новичок
- #3
Vital_N
А причем html, может тогда css, в html я таких тегов не припомню?
maxwell
artifex
- #4
For generic block level elements, use <div>
For generic inline elements, use <span>
So, you must use <div>.
SonyEricsson
Новичок
- #5
maxwell
Да без разницы div или спан, отступ только на первой строке и все.
Vital_N
Новичок
- #6
в html я таких тегов не припомню?
Нажмите для раскрытия.
..
..причем тут css?
-~{}~ 22.02.08 16:02:
Автор оригинала: SonyEricsson
maxwell
Да без разницы div или спан, отступ только на первой строке и все.Нажмите для раскрытия…
не верю )
SonyEricsson
Новичок
- #7
Да уж, действительно с div все нормально, значит по идее и спан со свойством display:block должно отрабатывать, только почему так?
maxwell
artifex
- #8
SonyEricsson, чудеса да и только.
У меня всегда все работало/работает.
Возможно причина в тебе? ))
SonyEricsson
Новичок
- #9
Видимо перенесенную строку он уже рисует в новом span, в котором нет свойства padding
-~{}~ 22.02.08 16:10:
maxwell
Я не спорю что в большинстве случаев в человеке дело, но хочется же докапаться до истины, до самых низов, а ни сделать как сказали и забыть
Vital_N
Новичок
- #10
SonyEricsson, отчего бы тебе доки по html не почитать? а не строить свои догадки? )
maxwell
artifex
- #11
SonyEricsson, Тэг span — inline.
Ты ему выставляешь свойство display:block.
Ты вилкой суп тоже ешь?
SonyEricsson
Новичок
- #12
maxwell
Поставь у span свойство display:block, и это будет тот же div
maxwell
artifex
- #13
SonyEricsson
Ок, перефразирую.
Ты ешь суп специально расплавленной вилкой и сделаной под ложку.
С таким подходом, можно смело писать следующее:
«if (bool_var.toString().length < 5)»
Как сделать отступ в html
Между заголовком и основным текстом слишком большой отступ, как его уменьшить?
К абзацу (тег <p> ) и заголовку (тег <h2> ) автоматически добавляется верхний и нижний отступы, которые в сумме и дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо явно добавить свойство margin-bottom к селектору h2 . Причем можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа.
Как мне для каждого абзаца добавить отступ первой строки?
Когда требуется установить абзацный отступ, лучше всего использовать стилевое свойство text-indent . Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения.
Ширина текстового блока при этом не меняется и остается исходно заданной. Величину отступа можно указывать в пикселах, процентах или других доступных единицах (пример 1).
Как убрать отступы и поля у всех элементов на странице?
Чтобы обнулить отступы и поля у всех элементов на странице, используйте стилевые свойства margin и padding с нулевыми значениями, добавляя их к универсальному селектору * .
Как изменить расстояние между абзацами текста?
При использовании тега <p> автоматически добавляются отступы сверху и снизу от текстового абзаца. Это сделано для того, чтобы визуально отделить один блок текста от следующего. Понятно, что значения отступов, которые заданы по умолчанию, устраивают не всегда, поэтому иногда их приходится уменьшать или увеличивать. Для этого можно использовать универсальное свойство margin , оно определяет отступы со всех сторон абзаца или margin-top для отступа сверху и margin-bottom — для отступа снизу.
Как убрать отступы вокруг формы?
При добавлении формы через тег <form> вокруг нее сверху и снизу автоматически добавляются отступы.
Чтобы их убрать, используйте стилевое свойство margin с нулевым значением, добавляя его к селектору FORM .
Как изменить отступы на веб-странице?
Отступы на веб-странице хотя и не видны, но не позволяют содержимому плотно прилегать к краям окна браузера, чтобы обеспечивать комфортность чтения. Свое собственное значение отступов можно установить, изменяя значения свойства margin у селектора body .
Есть разные способы установки HTML отступов перед текстом. Но для совместимости с различными браузерами и доступности, мы обсудим самые популярные методы:
Рекомендованный способ в CSS и HTML
Чтобы сделать отступ перед текстом или абзацем, лучше использовать CSS . Ниже приведены примеры того, как смещать надписи с помощью каскадных таблиц стилей. Вставьте каждый из приведенных примеров кода между тегами HTML <head></head>.
Следующий код создает CSS-класс «tab» , который отодвигает символы и абзац на 40 пикселей от левого края:
Вставив приведенный выше код в раздел <head>, можно выполнить его в любом месте, добавляя его в теги абзаца (<p>), как показано ниже:
Если вы планируете применять этот стиль на нескольких страницах, лучше создать файл .
css и связать его со всеми веб-страницами. Чтобы сделать отступ в HTML , добавьте следующую строчку между тегами <head> и создайте ссылку на файл. Мы назвали его « basic.css «:
Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега <style> и меток комментирования, как показано ниже:
Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый <p показанный выше.
Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:
Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.
Бонусная подсказка как сделать отступ в HTML: Чтобы поменять HTML отступ слева на отступ справа, измените свойство margin-left на margin-right .
Рекомендованный метод в HTML
Можно достичь тех же результатов используя стиль, встроенный в HTML- код .
Хотя применение CSS делает управление многочисленными веб-страницами легче, если использовать стиль только один раз:
Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги <p> не смещены.
А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.
Подсказка : можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.
Бонусная подсказка : Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.
Альтернативный метод
Другой часто применяемый метод, позволяющий создать HTML отступ текста — с помощью <blockquote>, как показано ниже.
Хотя это намного легче, но есть проблемы совместимости, которые могут возникнуть из-за применения этого решения. Данный тег предназначен для цитирования, а не смещения:
Пожалуйста, опубликуйте свои комментарии по текущей теме статьи.
За комментарии, отклики, подписки, лайки, дизлайки низкий вам поклон!
Дайте знать, что вы думаете по данной теме статьи в комментариях. Мы очень благодарим вас за ваши комментарии, подписки, лайки, дизлайки, отклики!
HTML отступ текста – в процессе создания сайта, нам много приходится работать с текстовыми блоками, или текстовыми фразами. Однажды, мне нужно было добавить текстовую фразу, таким образом, чтобы перед этой текстовой фразой был некоторый отступ текста от края html блока, в который данный текст добавлялся.
Казалось бы, простая задача, но в процессе ее решения, я столкнулся с тем, что данную задачу можно решить несколькими способами. В этой статье я хочу поделиться, каким образом, можно сделать отступ текста используя средства html.
Итак, html отступ текста , способ первый — самый, естественный и простой. Чтобы сделать отступ перед текстом, добавим перед текстом html код пробела — Добавить html код пробела можно в любом html редакторе.
Привожу пример рабочего кода задания отступа для текста, с помощью кода пробела:
В данном примере, перед выбранным нами текстом код пробела — & nbsp ; добавлен четыре раза, в результате, получим нужный нам отступ.
Мы знаем, что код пробела отрабатывается любым браузером. Поэтому, добавив необходимое количество пробелов перед текстом, можно получить необходимый отступ для текста.
Этот способ хорош тем, что он будет гарантированно отработан любым браузером.
Но у данного способа есть существенный недостаток. Для того, чтобы сделать отступ для текста достаточно большой по длине, в html код, перед текстом придется добавить большое количество знаков пробела, что может выглядеть не красиво, громоздко и не профессионально.
Одним из вариантов решения этой проблемы, является следующий способ задания отступа.
HTML отступ текста , способ второй — этот способ основан на свойствах тега blockquote. Данный тег задает отступ примерно 40 пикселей слева и справа, для размещенного в нем текста.
Кроме того, отступ задается сверху и снизу. Пример html кода использования данного способа приведен ниже:
Как видите, данный способ задания отступа для текста, очень прост в использовании, но и этот способ тоже имеет существенный недостаток. Отступ, который задает тег blockquote, является фиксированным и всегда равен одной и той же величине – 40px.
Чтобы исправить ситуацию, и при добавлении html отступа для текста иметь возможность задать любую величину, воспользуемся третьим способом.
HTML отступ текста , способ третий.
Здесь мы воспользуемся свойством параметра text-indent каскадных таблиц стилей CSS.
Если открыть справочник CSS, на странице с описанием свойств text-indent, то мы увидим, что с помощью text-indent, мы можем задавать величину отступа первой строки или первого абзаца, какого-либо блока текста.
Мы рассматриваем, пример с коротки текстовым блоком, поэтому свойства text-indent вполне подходят для нашего случая.
Ниже приведен html код, который формирует отступ текста с использованием text-indent.
Из примера видно, что задавая для text-indent разные значения аргументов, мы можем изменять величину отступа текста:
На мой взгляд, этот способ задания отступа для текста, является самым оптимальным, но, тем не менее, рассмотрим еще один способ задания отступа, с использованием изображений.
HTML отступ текста , четвертый способ — здесь мы, для задания отступа, будем использовать изображение.
В качестве рабочего примера, сразу рассмотрим html код, который демонстрирует работу данного способа:
<p><img src=image.png width=150 height=1> HTML отступ текста слева, используем изображение </p>
Из приведенного примера хорошо видно, что меняя ширину изображения, мы можем менять положение текста, то есть задавать нужный отступ для текста.
В качестве изображения можно использовать изображение, ширина и высота которого, равны одному пикселу. Чтобы применяемое нами изображение не было видно на странице, зададим для него цвет точно такой же, как фона страницы сайта.
На мой взгляд, приведенных выше способов задания отступов для текста вполне достаточно, чтобы организовать нужный Вам отступ в любой ситуации, при добавлении контента на страницу Ваших сайтов.
Добрый день дорогие друзья читатели моего блога! С Вами на связи снова Макс Метелев и сегодня мы продолжим говорить про тему создания сайтов, в частности, мы поговорим про то как сделать отступ текста в html документе.
Чтобы наша страничка, а точнее ее содержимое не прилипало к границам сайта, существуют два типа отступов. Это:
- Margin
- Padding
Вкратце расскажу про эти два атрибута CSS.
Атрибут margin позволяет сделать отступ целых блоков с содержимым. Ведь мы верстаем наши сайты с помощью div верстки, соответственно, наш сайт представляет собой совокупность различных блоков (так называемых «строительных кирпичей»), которые мы будем перемещать так как нам нужно. Мы можем перемещать блоки вправо, влево, а также вверх и вниз. У margin есть следующие свойства
HTML: отступы и интервалы | CSE 154 Неофициальное руководство по стилю
Отступ
Интервалы и отступы должны быть одинаковыми во всем коде.
Многие разработчики предпочитают использовать
Отступ в 4 или 2 пробела. В HTML каждый вложенный тег должен иметь отступ ровно один раз внутри
его родительский тег.
Вот пример неправильного отступа в HTML:
Я абзац!
Я еще один абзац!
<р>Я заголовок внутри абзаца!
Вот несколько примеров хороших отступов в HTML:
Я абзац!
<р> Я другой абзац! <р>Я заголовок внутри абзаца!
Поместите разрыв строки после каждого элемента блока. Не размещайте более одного блочного элемента на та же линия.
Привет, как дела?
Все в порядке
Привет, как дела?
Я в порядке
Вложенные теги
Закрывайте теги в порядке, обратном порядку открытия.
Всегда вкладывать каждый встроенный элемент внутрь блочного элемента.
Например, не помещайте тег непосредственно в корпус ; вместо этого поместите его внутрь p или li или другой элемент блочного уровня.
Форматирование строки
Длинные линии
В вашем HTML-коде не должно быть строк длиннее 100 символов. Если какая-либо строка длиннее 100 символов, разбить ее разделить на несколько строк.
Исключение: При использовании длинного URL-адреса вы можете оставить его в одной строке. если он длиннее 100 символов (разбивать URL-адрес на части — это худший стиль чем иметь это исключение для длинных строк).
Пустые строки
Поместите пустую строку между разделами страницы и между крупными элементами, содержащими много
содержание.
У вас не должно быть более одной пустой строки подряд.
Вы не должны использовать для добавления вертикального интервала между
элементы. Этот тег используется исключительно для разрывов строк внутри абзаца, и вы должны
не использовать более одного подряд.
Привет, как дела?
Я в порядке
Здравствуйте,
как дела?Я в порядке
Здравствуйте,
как дела?
Расстояние
Интервал в тегах
Не размещайте пробелы между тегами < фигурная скобка и имя элемента.
Самозакрывающиеся этикетки и интервалы
Самозакрывающиеся теги могут использовать синтаксис или .
Однако вы должны соответствовать тому стилю, который используете.
При использовании стиль, перед закрывающими /> всегда должен быть пробел.
Абзац HTML и отступ первой строки
- Абзацы
- Отступ первой строки
Абзацы
Любой текст имеет свою уникальную структуру: книги делятся на части, разделы и главы, газеты и журналы имеют отдельные рубрики и подзаголовки, в которые в свою очередь включаются фрагменты текста, также имеющие свою структуру: абзацы, отступы и т. д.
Текст, размещаемый на веб-страницах, не является исключением, он также должен иметь логическую структуру, понятную каждому пользователю. Ведь от того, насколько удобно и просто будет восприниматься текст на странице, зависит очень многое: в первую очередь, какое впечатление о вашем сайте сложится у посетителя.
Для создания структурных единиц текста, например абзацев, в документах HTML используется тег
Абзац
Примечание: по умолчанию интервал между абзацами равен 1em (em — единица измерения, равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.
Не забывайте о закрывающем теге
Большинство браузеров корректно отобразят HTML-документ, даже если вы забыли о закрывающем теге.
Абзац
Еще один абзац
Этот код будет работать в большинстве браузеров, но не полагайтесь на него. Забытый закрывающий тег может привести к неожиданным результатам.
Отступ первой строки
Первая строка является начальной строкой абзаца. Чтобы сделать отступ первой строки к вашим абзацам, вам нужно использовать свойство CSS text-indent , которое позволяет вам сделать отступ первого предложения:
<голова>
<мета-кодировка="utf-8">
Название страницы
<стиль>
р {текстовый отступ: 25px; }
<голова>
<тело>
Как и в любом настоящем искусстве, в хороших текстах нет банальностей,
на что некоторые также ссылаются на красную линию, учитывая, что ее использование
не так важно.
Однако надо понимать, что любая запятая несет в себе как эстетическую
и смысловая нагрузка, и не только это дань правилам грамматики касается
и форматирование.
Попробуйте »
В приведенном выше примере первая строка каждого абзаца на странице будет начинаться с отступа 25px . В приведенном ниже примере показано, как можно указать отступ только для определенного абзаца на странице:
Как и в любом настоящем искусстве, в хороших текстах нет банальностей, на что некоторые ссылаются и на красную линию, считая, что ее использование не столь важно. Однако надо понимать, что любая запятая несет в себе как эстетическое, так и и смысловая нагрузка, и не только это дань правилам грамматики проблемы и форматирование.
Попробовать »
Примечание: размер отступа в 25px ставить не обязательно, оптимальный размер отступа можно подобрать самостоятельно, также с помощью свойства text-indent можно сделать выступающий над остальными текстовой строки необходимо установить отрицательное значение для свойства (например: -30px ).