Проблема с паддингом.

Mark Ghaphes · January 9, 2012

Суть проблемы:

Не могу понять поведение свойства padding. Почему когда я задаю padding sidebar'у, отступ создается за счет контента?...причем по разному действует с разных сторон, в зависимости от расположения sidebar'а.

body {margin:0; padding:0; background-color:black; background-image:url('bg images/bg_body.jpg'); background-position:top center;}

#container {width:80%; background-color:; margin:50px 10% 100px 10%; min-width:800px;}

#header {background-image:url('bg images/bg_header.jpg'); width:100%; height:300px; border:solid 2px black;}
#header_layer_one {background-image:url('bg images/bg_header_layer_one.jpg'); background-position:center; background-repeat:no-repeat; width:100%; height:300px;}

#nav {width:100%; height:50px; background-color:black; border:solid black 2px;}


#nav_list {display:inline;}
#nav_list, li {list-style-type:none;}
#nav_list li {width:150px; height:50px; float:left;}
#nav_list li:hover {background-position:bottom;}
#nav_list li ul {visibility:hidden;}
#nav_list li:hover ul li {visibility:visible; position:relative; bottom:300px;}


#opportunities {background-image:url('bg images/opportunities.png'); height:50px; width:150px; }
#structure {background-image:url('bg images/structure.png'); height:50px; width:150px;}
#brain_power {background-image:url('bg images/brain_power.png'); height:50px; width:150px;}
#about {background-image:url('bg images/about.png'); height:50px; width:150px;}


#illustration_opportunities {background-image:url('bg images/illustration_opportunities.png'); height:250px; width:230px; right:0px;}
#illustration_structure {background-image:url('bg images/illustration_structure.png'); height:230px; width:230px; right:150px;}
#illustration_brain_power {background-image:url('bg images/illustration_brain_power.png'); height:250px; width:230px; right:300px;}
#illustration_about {background-image:url('bg images/illustration_about.png'); height:250px; width:230px; right:450px;} 

.nav_list_link {width:150px; height:50px; display:block;}
a {outline:none; text-decoration:none;}




#content { height:100%; background-color:#272727; overflow:hidden; width:100%; border:solid black 2px; }

#sidebar { width:200px;   float:right;  min-height:550px; padding-left:30px; padding-right:30px;}
#some_info  {  }
#some_info_header {width; height:60px; background-image:url('bg images/some_info_header.png');}
#some_info_content { width:200px;  background-image:url('bg images/some_info_content.png');}
#some_info_footer { width:200px; height:60px; background-image:url('bg images/some_info_footer.png');}


#main_info {margin-right:260px; min-height:500px;  padding:10px; }


#sidebar img {border:solid black 1px; margin-left:25px;}


p {color:#5d5d5d;}


#footer {clear:both; height:50px; width:100%; background-color:black; border:solid black 2px;}

  <!DOCTYPE html>
  <html>
    <head>
      <title>Power-of-brain.com</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
      <div id="container">
        <div id="header">
          <div id="header_layer_one">
          </div>
        </div>
        <div id="nav">
            <ul id="nav_list">
            <li id="opportunities"><a class="nav_list_link" href="opportunities.html" title="All about opportunities that gives to you your brain."></a>
              <ul class="illustration">
                <li ><img src="bg images/illustration_opportunities.png" width="230px" height="250px"/></li>
              </ul>
            </li>
            <li id="structure"><a class="nav_list_link" href="structure.html" title="Structure of brain"></a>
              <ul class="illustration">
                <li id="illustration_structure"><img src="bg images/illustration_structure.png" width="230px" height="250px"/></li>
              </ul>
            </li>
            <li id="brain_power"><a class="nav_list_link" href="brain power.html" title="Ways to boost your brain power"></a>
              <ul class="illustration">
                <li id="illustration_brain_power"><img src="bg images/illustration_brain_power.png" width="230px" height="250px"/></li>
              </ul>
            </li>
            <li id="about"><a class="nav_list_link" href="about" title="About site. Little history. When it was created and established."></a>
              <ul class="illustration">
                <li id="illustration_about"><img src="bg images/illustration_about.png" width="230px" height="250px"/></li>
              </ul>
            </li>
          </ul>
        </div>
        <div id="content">
          <div id="sidebar">
            <div id="some_info">
              <div id="some_info_header"></div>
              <div id="some_info_content">
              Есть множество способов расстаться с жизнью в Зоне. Конечно, не так много, как в большом городе, но все равно достаточно. 
              В Зоне вы не попадете под случайную машину на дороге, вам не свалится на голову кирпич, 
              и никакой канализационный люк не раскроет перед вами с любезностью зияющее отверстие в асфальте. 
              По сравнению с мегаполисом, содержащим толпу бездумных марионеток, Зона, по всем правилам логики, 
              должна была бы быть на удивление безопасным местом. Однако логика – наука беспристрастная, 
              а человеческие мотивации сильно зависят от точки зрения, в которой практически всегда находится собственное Я. 
              На квадратный километр Зоны может содержаться одна-единственная аномалия, да и то Птичья Карусель, 
              которую с легкостью распознает любой детектор аномалий,
               но сам факт этого может влиять на человека так, словно он оказался с завязанными глазами посередине скоростной автострады.   
              </div>
            <div id="some_info_footer">.</div>
            </div>  
            </div>
            <div id="main_info">
              <p>Есть множество способов расстаться с жизнью в Зоне. Конечно, не так много, как в большом городе, но все равно достаточно. 
              В Зоне вы не попадете под случайную машину на дороге, вам не свалится на голову кирпич, 
              и никакой канализационный люк не раскроет перед вами с любезностью зияющее отверстие в асфальте. 
              По сравнению с мегаполисом, содержащим толпу бездумных марионеток, Зона, по всем правилам логики, 
              должна была бы быть на удивление безопасным местом. Однако логика – наука беспристрастная, 
              а человеческие мотивации сильно зависят от точки зрения, в которой практически всегда находится собственное Я. 
              На квадратный километр Зоны может содержаться одна-единственная аномалия, да и то Птичья Карусель, 
              которую с легкостью распознает любой детектор аномалий,
               но сам факт этого может влиять на человека так, словно он оказался с завязанными глазами посередине скоростной автострады. </p>
            </div>

        </div>
        <div id="footer">
        </div>
      </div>
    </body>
  </html>

br3t · January 9, 2012

Padding действует не "внутрь", а "наружу", т.е. видимые размеры блока определяются как ширина/высота + отступы

Сделайте для #some_info_content {width:auto; padding:0 10px;}

Mark Ghaphes · January 9, 2012

Спасибо большое. Решение проблемы мне понятно. Но в чем причина такого поведения.? Паддинг же создает внутренние отступы, как они влияют на внешние элементы.? Не могли бы вы по-подробнее написать?

Edited January 9, 2012 by Mark Ghaphes

br3t · January 9, 2012

Мне сложно объяснить почему так, просто надо всегда об этом помнить

Вот вам классический пруфпик в помощь

Т.е. width и padding-left/padding-right - независимые величины

Mark Ghaphes · January 9, 2012

Ясно. У меня значит было искаженное представление об этой "коробке". Я думал что область паддинга находится внутри области размера(width/height). Спасибо.

cyklop77 · January 9, 2012

существует правило, которое как бы переключает модель расчета ширины блока. после переключения отступы не влияют на ширину. возможно, оно тебе пригодится. насколько помню box-sizing , поправьте, если ошибся.

работает только в современныъ браузерах

Edited January 9, 2012 by cyklop77

Mark Ghaphes · January 9, 2012

У меня еще вопрос касательно моего макета - фиксированным сайдбаром и резиновый контентом.

Свойство overflow для блока content я использовал по примеру, который нашел в и-нете. Сам бы я ни за что бы не догадался его использовать, потому что судя по его описанию он "управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров." Дело в том что если убрать overflow:hidden то сайдбар выйдет за границы блока content. Не пойму логики работы этого свойства.

А результат вот такой:

Edited January 9, 2012 by Mark Ghaphes

br3t · January 10, 2012

Mark Ghaphes, посмотрите эту тему http://forum.htmlbook.ru/index.php?showtopic=31829 , особенно этот http://forum.htmlbook.ru/index.php?showtopic=31829&view=findpost&p=240221 пост

Там нет никаких overflow, возьмите этот макет за образец

Mark Ghaphes · January 10, 2012

Отлично. Спасибо.

Sign In

Проблема с паддингом.

Question

Mark Ghaphes

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

br3t

Link to comment

Share on other sites

Mark Ghaphes

Link to comment

Share on other sites

br3t

Link to comment

Share on other sites

Mark Ghaphes

Link to comment

Share on other sites

cyklop77

Link to comment

Share on other sites

Mark Ghaphes

Link to comment

Share on other sites

br3t

Link to comment

Share on other sites

Mark Ghaphes

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information