CSS: Сомнения с положением padding

Я работаю с 2 DIVs, таким образом, что один лежит над другим. И больше вещей, чем ожидалось, происходит, когда я увеличиваю верхнее значение первого DIV.CSS: Сомнения с положением padding

HTML-код:

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="EX7.css"> 
    </head> 
    <body> 
    <div id="first"> 
      <p>Um parágrafo com 3 span: <span>SPAN A </span><span>SPAN B </span><span>SPAN C</span> 
    </div> 

    <div id="second"> 
      <p>* A fonte do parágrafo tem 20pt, e a dos span tem 8pt.</p> 
    </div> 


    </body> 
</html>

Код CSS:

body{ 
padding:0; 
margin:0; 
} 

#first{ 
width:100%; 
height:70px; 
background-color:green; 
border-bottom:4px solid black; 
margin-top:-30px; 
padding-top:0px; 
} 

#second{ 
margin-top:-27px; 
padding-top:-5px; 
width:100%; 
height:70px; 
background-color:green; 
} 

#first p, #second p{ 
font-family:sans-serif; 
font-size:20pt; 
font-weight:bold; 
}

С помощью этого кода, моя страница следующая:

enter image description here

Обратите внимание на границы, разделяющей 2 DIVs. Также обратите внимание на свойство padding-top:0px#first DIV. Теперь АМСВО мой вопрос: Если я изменить это свойство padding-top:1px, появляется странное поведение:

enter image description here

Обратите внимание, что содержание #first DIV действительно держит 1px прочь от его сверху, как и ожидалось. Но пространство между нижней частью содержимого #first DIV и вершиной #second исчезает, и я не стал объяснять почему.

Буду признателен за вашу помощь. Благодаря!

источник

2015-01-13 Mr Guliarte

Http: // jsfidd le.net/jpvsjmz5/ - это то, что ищут ура? –

Пройдите через «CSS Box Model» и поймите, как маржа, заполнение, пограничные работы http://www.w3schools.com/css/css_boxmodel.asp. Все самое лучшее – shanidkv

Попробуйте это:

CSS

body{ 
padding:0; 
margin:0; 
} 

#first{ 
width:100%; 
height:70px; 
background-color:green; 
border-bottom:4px solid black; 
padding-top:0px; 
} 

#second{ 
width:100%; 
height:70px; 
background-color:green; 
} 

#first p, #second p{ 
font-family:sans-serif; 
font-size:20pt; 
font-weight:bold; 
} 

p{ 
    margin: 0px; 
    line-height: 2.6em; 

}

HTML

<div id="first"> 
    <p>Um parágrafo com 3 span: <span>SPAN A </span><span>SPAN B </span><span>SPAN C</span></p> 
</div> 

<div id="second"> 
    <p>* A fonte do parágrafo tem 20pt, e a dos span tem 8pt.</p> 
</div>

DEMO HERE

источник

2015-01-13 15:57:13

Пожалуйста, что вы имеете в виду под «ошибками CSS»? –

Ошибки были отредактированы .. теперь нет ошибок –

CSS: Сомнения с положением padding

ответ

Смежные вопросы