Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Ручные отступы у P, CSS 
V
    Опции темы
InfMag
Дата 23.1.2009, 13:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


…
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4



Доброго времени суток!

Задался вопросом. В общем использую я тег P, у него есть свои отступы, но если тег ставится например в начале td - сверху отступа не будет, а если я буду прописывать margin:0;padding:0; и пропишу потом свои отступы, то сверху отступы убираться не будут. Как этого можно достичь с CSS?
PM   Вверх
bars80080
Дата 23.1.2009, 14:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



что-то мало понятное, что мешает:

Код

p { margin:10px; }

PM MAIL WWW   Вверх
InfMag
Дата 23.1.2009, 15:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


…
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4



В общем наглядный пример, итак:

1.html
Код
<html>
<head><style>*{paddding:0;margin:0;}p{margin:10px;}</style></head>
<body style="margin:0px;padding:0px;">
<p>JNoiueoguiwebgouwbuobguowgwuoegbo</p>
<p>JNoiueoguiwebgouwbuobguowgwuoegbo</p>
</body>
</html>


2.html
Код
<html>
<body style="margin:0px;padding:0px;">
<p>JNoiueoguiwebgouwbuobguowgwuoegbo</p>
<p>JNoiueoguiwebgouwbuobguowgwuoegbo</p>
</body>
</html>


И вот прокоменченый результат:
user posted image

Добавлено через 46 секунд
Вооот... Меня интересует как сохранить этот принцип отступов?
PM   Вверх
NDenis
Дата 23.1.2009, 15:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



А вы сами как думаете?
В 1.html вы обнуляете все отступы (* {margin:0; padding:0;}).
В 2.html вы обнуляете отступы только у html и body. Однако у каждого html-элемента есть значения отступов по умолчанию.

Используйте вначале сброс стилей по умолчанию, затем задавайте те значения, которые вы пожелаете.
PM MAIL   Вверх
InfMag
Дата 25.1.2009, 22:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


…
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4



NDenis, Вы опять меня не поняли, мне важен совсем не этот принцип, мне важно сделать стили у тега P такие же как и стандартные. То-бишь если P стоит в начале у него исчезают верхние отступы или если в конце - нижние. Если прописываю свои отступы такого не происходит.
PM   Вверх
Violator
Дата 26.1.2009, 00:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



InfMag, 
На самом деле отступы есть, добавьте перед параграфами такой блок <div style="height:10px;background:green;"></div>
Код

<html>
<body style="margin:0px;padding:0px;">
<div style="height:10px;background:green;"></div>
<p>JNoiueoguiwebgouwbuobguowgwuoegbo</p>
<p>JNoiueoguiwebgouwbuobguowgwuoegbo</p>
</body>
</html>


посмотрите как будут отображаться параграфы в таком примере
Код

<html>
<body style="margin:0px;padding:0px;">
<div style="height:10px;background:green;"></div>
<div style="background:red;">
<p>JNoiueoguiwebgouwbuobguowgwuoegbo</p>
<p>JNoiueoguiwebgouwbuobguowgwuoegbo</p>
</div>
<div style="height:10px;background:green;"></div>
</body>
</html>


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

<html>
<head>
  <style>
    p.first {margin-top:0;}
    p.last {margin-bottom:0;}
  </style>
</head>
<body style="margin:0px;padding:0px;">
<div style="height:10px;background:green;"></div>
<div style="background:red;">
<p class="first">JNoiueoguiwebgouwbuobguowgwuoegbo</p>
<p>JNoiueoguiwebgouwbuobguowgwuoegbo</p>
<p>JNoiueoguiwebgouwbuobguowgwuoegbo</p>
<p class="last">JNoiueoguiwebgouwbuobguowgwuoegbo</p>
</div>
<div style="height:10px;background:green;"></div>
</body>
</html>

PM MAIL   Вверх
webster
Дата 26.1.2009, 01:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34



Как справедливо заметил NDenis
Цитата(NDenis @  23.1.2009,  15:34 Найти цитируемый пост)
Однако у каждого html-элемента есть значения отступов по умолчанию.
у каждого элемента на странице есть отступы установленные броузерами по-умолчанию, но различного размера и с разных сторон в зависимости от семейства броузеров.
Что касается параграфа, то совершенно справедливо, что по-умолчанию он должен иметь отступ от другого элемента (в частности другого параграфа, иначе он не был бы параграфом). А так. как броузеры эти отступы проставляют по-разному (например FF ставит отступ и сверху параграфа и снизу, что не очень удобно, гораздо легче управлять разметкой страницы когда отступы у элементов находятся с одной стороны, а у IE только снизу, что является более логичным вариантом).
Т.к. проверить наличие отступов визуально очень проблематично (проставив бордер или сделав заливку), то можно для этого воспользоваться вариантом, предложенным Violator. Или просто поочередно обнулять отступы параграфа с каждой стороны и просматривать результаты в различных броузерах:
Код

p {
margin-top: 0px;
...
margin-bottom: 0px;
...
Обычно для лучшей управляемости страницы верстальщики сначала так и делают - обнуляют отступы всех HMTL-элементов, установленные броузерами по-умолчанию:
Код

* {
margin: 0px;
padding: 0px;
}
как уже отмечал NDenis и проставляют свои значения, для получения корректного мультиброузерного варианта.

PM MAIL   Вверх
Violator
Дата 26.1.2009, 04:28 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



webster, 
на самом деле все браузеры ставят отступы сверху и снизу smile 

свойство margin указывает отступ элемента от другого элемента
в этом примере отступ будет 15px (не 25px)
Код

<p style="margin-bottom:10px">123</p>
<p style="margin-top:15px;">123</p>

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

<html>
<body style="margin:0px;padding:0px;">
<div style="height:10px;background:green;"></div>
<div style="background:red;">
  <p style="background:gray;">123</p>
  <p style="background:darkgray;">123</p>
</div>
<div style="height:10px;background:green;"></div>
</body>
</html>

правда и тут есть свои тонкости, если поставить у блока в котором параграфы например padding:1px 0; то мы увидим что margin применяется к блоку-родителю
Код

<html>
<body style="margin:0px;padding:0px;">
<div style="height:10px;background:green;"></div>
<div style="background:red;padding:1px 0;">
  <p style="background:gray;">123</p>
  <p style="background:darkgray;">123</p>
</div>
<div style="height:10px;background:green;"></div>
</body>
</html>

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

<html>
<body style="margin:0px;padding:0px;">
<div style="background:red;">
  <p style="background:gray;">123</p>
  <p style="background:darkgray;">123</p>
</div>
<div style="height:10px;background:green;"></div>
</body>
</html>

но если же проставить вручную margin у параграфов, все браузеры отображают корректно
Код

<html>
<body style="margin:0px;padding:0px;">
<div style="background:red;">
  <p style="background:gray;margin:10px 0;">123</p>
  <p style="background:darkgray;margin:10px 0;">123</p>
</div>
<div style="height:10px;background:green;"></div>
</body>
</html>


в общем вывод один, стоит обнулять значения назначенные браузером по умолчанию, и прописывать свои свойства
PM MAIL   Вверх
InfMag
Дата 26.1.2009, 12:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


…
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: нет
Всего: 4



Всем спасибо, посвятили, буду тестировать.
Буду проставлять только нижние отступы.
PM   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0566 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.