Вертикальное форматирование, никак не пойму.

amelice · June 18, 2011

Никак не могу понять поведение отрицательного margin'a внутри родительского блока.

Вот пример:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title></title>
 <style type="text/css">
	p.abz{
		margin-bottom:-100px; 
	        margin-right:10px;
	        margin-top:0;
		border:3px solid gray;
	        }		
	div{
	        width:420px;
		margin-top:50px;
		border:3px solid red;
		margin:50px;
		}		
 </style>
</head>
<body>
	<div>
	<p class="abz">a paragrapf</p>
	soderjimoe diva  
	</div>
	<p>a paragrapf</p>
</body>
</html>

1. Как рассчитывается смещение отрицательного margin относительно от своего родителя?

2. С увеличением значения margin-bottom элемента p.abz текстовое содержимое div смещается вверх, хотя сам div не смещается. Уже со значения -100пк, оно уходит за пределы окна браузера. Почему так происходит?

MC WEST · June 18, 2011

Вот здесь почитай о margin'е, там все отлично написано.

amelice · June 20, 2011

Вот здесь почитай о margin'е, там все отлично написано.

Спасибо, все понятно стало.

Sign In

Вертикальное форматирование, никак не пойму.

Question

amelice

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

MC WEST

Link to comment

Share on other sites

amelice

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information