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

Vensdale · June 10, 2012

Я в сайтостроении новичок, та что сильно не пинайте. Вобщем есть 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 - то все работает, но мне необходимо разобраться в чем проблема в описанном выше случае.

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

alexforce2 · June 11, 2012

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.

hedgehog · June 11, 2012

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

flintovich · June 11, 2012

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

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

Vensdale · June 11, 2012

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

hedgehog · June 11, 2012

из-за этого:

<br class="clear"/>

Vensdale · June 11, 2012

Спасибо. Буду разбираться.

Sign In

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

Question

Vensdale

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

alexforce2

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

flintovich

Link to comment

Share on other sites

Vensdale

Link to comment

Share on other sites

hedgehog

Link to comment

Share on other sites

Vensdale

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information