Как (в данном примере) понять изменения размера-фона контейнера при наличии у него рамки и без оной?

sashakiselev · July 21, 2010

body {
background: #474747;
margin: 0px;
padding: 0px;
font-family: verdana;
color: #000;
}

#container {
background: #9cf;
position: relative;
margin: 0px auto;
padding: 0px;
width: 700px;
border: 1px solid #fff	/* !—РАМКА ТУТ!*/
}

/* header
———————————————-- */
#pageHeader {
height:100px;
background: pink;
}

/* text
———————————————-- */
p {
font-size: 12px;
line-height: 16px;
margin: 0;
}

h6 {	
margin-left: 0px;
margin-right: 0px; 
margin-top: 24px; 
margin-bottom: 24px;
}

Значения для заголовка h6 вписал только для наглядности - это его дефолные значения вычесленные мной опытным путем.

Собственно вопрос в том, что при наличии рамки у контейнера поле margin-top: 24px у заголовка принимает цвет контейнера (становится частью контейнера), при отсутствии оной тоже поле (margin-top: 24px) над заголовком принимает цвет body (перестает быть частью контейнера)

Хотелось бы понять под какое правило попадает данная ситуация ну и т.д.

ЗЫ.. поясню, так как хтмл решил не добавлять - он большой и явно тут лишний. Под заголовком тут понимается верхнее - css Zen Garden, весь остальной контент баластый мусор.

Edited July 21, 2010 by sashakiselev

shvv · July 21, 2010

Это, кажется, схлопывание маргинов.

А как надо, чтобы было?

sashakiselev · July 21, 2010

shvv, а что есть "схлопывание маргинов" в данном примере? Тут вроде как значение margin только в одном месте фигурирует - у заголовка h6! .. в остальном же везде по нулям.

Я тут даже специально margin у контеийнера убрал (margin: 0px auto);, чтоб прояснить вопрос..

Вопрос возник случайно - я до этого не знал, что у <h1/2/3/4/5/6>заголовков есть дефолтные поля margin сверху и снизу (причем у каждого заголовка свое значение)... так вот если не присвоить 0, то есть такая реакция на рамку - мне хотелось бы логику понять.

Searcher · July 21, 2010

Ну без кода страницы как-то тугова-то... Мало ли что вы там понаписали. А лучше ссылку.

shvv · July 21, 2010

shvv, а что есть "схлопывание маргинов" в данном примере? Тут вроде как значение margin только в одном месте фигурирует - у заголовка h6! .. в остальном же везде по нулям.

Статья Иллюстрация 3.

sashakiselev · July 21, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
   <title>Tuesday</title>

<style type="text/css">
body {
background: #474747;
margin: 0px;
padding: 0px;
font-family: verdana;
color: #000;
}

#container {
background: #9cf;
position: relative;
margin: 20px auto;
padding: 0px;
width: 700px;
height:500px;
border: 5px solid #fff; /* РАМКА ТУТ=) */
}

/* header
———————————————-- */
#pageHeader {
height:100px;
background: pink;
}

/* text
———————————————-- */
p {
font-size: 12px;
line-height: 16px;
margin: 0;
}
</style>


<body>
<div id="container">
   <div id="pageHeader">
	  <h1>css Zen Garden</h1>
   </div>

   <div id="quickSummary">
	  <p>A demonstration of wh..........................</p>
	  <p>Download the sample <a href="">html file</a> and <a href="">css file</a></p>
   </div>

   <div id="preamble">
	  <h3>The Road to Enlightenment</h3>
	  <p>Littering a d..............</p>
	  <p>Today, we must c........</p>
		  <p>The css Zen Garden invites ........</p>
   </div>

</div>
</body>
</html>

А лучше ссылку.

Searcher, а это как?.. где то размещать т.е.?

shvv, спасибо за ссылку - ушел за кофе и читать)

Edited July 21, 2010 by sashakiselev

sashakiselev · July 21, 2010

Статья Иллюстрация 3.

Figure 4. Where the margins sit.

Figure 3. The margins revealed.

которая из этих - третья?)) - хотя я обе прочел - ничего схожево не увидел.. там речь идет о суммировании марджинов на разных элементах - вобщем не увидел я общего.. у меня то суммироваться нечему..

shvv · July 21, 2010

Figure 3. The margins revealed.

На ней серая граница в точку - маржин дива, а красная - маржин h1. Но поскольку маржин заголовка в 2 раза больше маржина дива, то он вылезает наружу.

Ну ладно, сейчас к вечеру придут эксперты - они разберутся.

Sign In

Как (в данном примере) понять изменения размера-фона контейнера при наличии у него рамки и без оной?

Question

sashakiselev

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

shvv

Link to comment

Share on other sites

sashakiselev

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

shvv

Link to comment

Share on other sites

sashakiselev

Link to comment

Share on other sites

sashakiselev

Link to comment

Share on other sites

shvv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information