Vensdale

Почему padding не работает?

Recommended Posts

Я в сайтостроении новичок, та что сильно не пинайте. Вобщем есть HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Главная</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<!-- top_header -->
<div id="t_header">
<div id="t_header_middle">
<p>Левый текст| E-mail: <a href="mailto:xxxxx@mail.ru" title="Написать нам письмо">xxxxx@mail.ru</a></p>
<a href="http://www.mailxxx.ru" target="_blank" title="Посетить сайт" class="sm">"Правый текст"</a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>

Есть CSS к нему


* {
margin: 0;
padding: 0;
}

body {
font: 12px Arial, sans-serif;
text-align: left;
}

a {
text-decoration: none;
color: #cccccc;
}

#wrapper {
width: 100%;
}

#t_header_middle, #b_header_middle, #nav_middle, #content_middle, #footer_middle {
width: 960px;
margin: 0 auto;
display: block;
position: relative;
}

#t_header {
background-color: #000000;
}

#t_header_middle {
color: #ffffff;
outline: 1px solid #cc0000;
padding: 10px 0; /* вот этот padding */
}

#t_header_middle p {
float: left;
}

#t_header_middle a.sm {
float: right;
}

.clear {
clear: both;
}

Пожалуйста объясните новичку почему padding: 10px 0; не дает ожидаемых внутренних отступов в контейнере #t_header_middle? Причем если не давать #t_header_middle a.sm - float: right; то padding: 10px 0; работает. Это связано с float? Если задать padding для родителя #t_header - то все работает, но мне необходимо разобраться в чем проблема в описанном выше случае.

Наглядный пример

Share this post


Link to post
Share on other sites

padding: 10px 0; в блоке #t_header_middle не работает потому что все его потомки имеют свойство float(а float выходит из нормального потока), поэтому высота блока #t_header_middle равна 20 пикс(вертикальный паддинг 10пикс+10пикс), то есть #t_header_middle является пустым блоком.

А в блок #t_header паддинг работает, потому что его потомок #t_header_middle имеет высоту 20пикс, и уже от него отсчитывается паддинг блока #t_header.

Share this post


Link to post
Share on other sites

overflow:hidden для #t_header_middle , а div.clear можно убрать. он не нужен, да и находится не там, где должно ): если уж совсем хочется clear:both, то можно использовать after для #t_header_middle

Share this post


Link to post
Share on other sites

Ежели не работает padding,то может быть какой то конфликт полей.

Попробуйте задать падингу !important; или диву в котором находится нужный padding, рамку.

Share this post


Link to post
Share on other sites

Господа, большое спасибо за разъяснения. overflow:hidden для #t_header_middle помог. У меня остался один вопрос - почему здесь padding работает в таком же же блоке (#topbar) как у меня, но без прописки overflow?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors