Свойство margin-top

artylion · April 11, 2010

Согласно описанию:

http://www.htmlbook.ru/css/margin.html

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента

Собственно вопрос: почему в примере ниже красный блок отступает не от родительского элемента (блок content), а от header?

<!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">
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	width: 100%;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}


img {
	border: none;
}
input {vertical-align: middle}
#wrapper {
	width: 600px;
	margin: 0 auto;
}


/* Header
—————————————————————————--*/
#header {
	height: 100px;
	background: #FFE680;
}


/* Middle
—————————————————————————--*/
#content {background: #eee;
}
#block {width: 200px;
		height: 100px;
		background: red;
		margin: 0 auto;
		margin-top: 10px;}

#content p {background: #ccc;
			margin: 10px;}

/* Footer
—————————————————————————--*/
#footer {
	height: 50px;
	background: #BFF08E;
}
		</style>
</head>

<body>

<div id="wrapper">

	<div id="header">
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent 

dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac 

diam. Etiam neque. zx./11:36 11.04.2010
	</div><!-- #header-->

	<div id="content"><div id="block"></div>
<p>Content: Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, 

aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque 

vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, 

ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit.</p>
<p>Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui 

ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi 

tempor pulvinar pede. Donec vel elit.</p>
	</div><!-- #content-->

	<div id="footer">
Footer: Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at 

cursus dolor vestibulum neque enim.
	</div><!-- #footer -->

</div><!-- #wrapper -->

</body>
</html>

s0rr0w · April 11, 2010

Потому что происходит схлопывание отступов

artylion · April 11, 2010

Потому что происходит схлопывание отступов

Как тогда сделать чтоб добиться отступа от родительского блока?

psywalker · April 11, 2010

Как тогда сделать чтоб добиться отступа от родительского блока?

Например можно поставить родительскому блоку overflow: hidden;

artylion · April 11, 2010

Например можно поставить родительскому блоку overflow: hidden;

ok. Спасибо большое, помогло. а есть еще способы?

stars · April 11, 2010

ok. Спасибо большое, помогло. а есть еще способы?

Это самый что не на есть верный способ, а так конечно есть способы ))) например запихнуть еще 1 див перед этим пустой и указать ему высоту ))) или для родителя прописать padding попробовать... Однако если родительский элемент в данном случаи #content должен иметь фон и если на странице появятся элементы с прописанными position то для корректного отображения надо обязательно прописывать overflow советую почитать внимательно про это ксс свойство

Edited April 11, 2010 by stars

mishka · April 11, 2010

Бывает что нельзя использовать overflow:hidden;(например есть всякие всплывающие подсказки, которые при ховере появляются) тогда кто как поступает?

stars · April 11, 2010

Бывает что нельзя использовать overflow:hidden;(например есть всякие всплывающие подсказки, которые при ховере появляются) тогда кто как поступает?

А можно пример?

mishka · April 11, 2010

ну есть такой себе боксик с какимто описанием товара, и в уголку так маленький кружочек с буковкой например "i" при наведении на него получается такой блок побольше, который выступает за пределы нашего боксика, и в нем какаято дополнительная инфа. Этот блок с доп инфой например на абсолюте висит.

ну вобщем гдето так .

Edited April 11, 2010 by mishka2

Justnewone · April 11, 2010

например, можно паддинги или бордеры по 1 пикселю сверху и снизу заместо оверфлоу. Если критично что они будут заметны - соответствующие отриц. маргины.

mishka · April 11, 2010

А если еще и флоаты внутри есть?

mishka · April 11, 2010

короче - нужно сделать так чтобы ничего не выпадало, но при этом и не обрезалось. Также флотать внешний элемент нельзя, чтобы поток был чистым. Типа float:left;clear:both; нельзя юзать.

psywalker · April 12, 2010

короче - нужно сделать так чтобы ничего не выпадало, но при этом и не обрезалось. Также флотать внешний элемент нельзя, чтобы поток был чистым. Типа float:left;clear:both; нельзя юзать.

Медведь, это такая задачка чтоли?

mishka · April 12, 2010

Медведь, это такая задачка чтоли?

Ну да

Я ждал пока ты отзовешся на эту задачу. А то все молчат, либо шифруются, либо незнают.

Неужели ниразу с таким не сталкивались?

Ну если верстать какую нибудь вордпресовскую страничку, то там такого может и не быть.

psywalker · April 12, 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
		div.wrap { background: red;}
		p { background: blue; margin-top: 20px;}
</style>
</head>

<body>
	<div class="wrap">
		<p>kdjkjf dkjfkdjfksf dskjfkdfjkdsljf dkfjdskfjksdf dskfjkdsj</p>
	</div>
</body>
</html>

s0rr0w · April 12, 2010

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

Вы все не теми категориями мыслите. Поведение элемента и его дизайн определеяет структуру HTML.

mishka · April 12, 2010

Вы все не теми категориями мыслите. Поведение элемента и его дизайн определеяет структуру HTML.

Смотри Медведь, условия правильные?

HTML, CSS - делаете сами, колличество блоков и их свойства это на ваше усмотрение.

ну есть такой себе боксик с какимто описанием товара, и в уголку так маленький кружочек с буковкой например "i" при наведении на него получается такой блок побольше, который выступает за пределы нашего боксика, и в нем какаято дополнительная инфа. Этот блок с доп инфой например на абсолюте висит. Также внутри есть флотнутые элементы.

короче - нужно сделать так чтобы ничего не выпадало, но при этом и не обрезалось. Также флотать внешний элемент нельзя, чтобы поток был чистым. Типа float:left;clear:both; нельзя юзать.

Когда ктонить из новичков спрашивает "как сделать чтобы не вылазило" - то ему всегда отвечают overflow:hidden; Вот мне стало интересно кто как в подобных случаях, как я описал, поступает.

Edited April 12, 2010 by mishka2

psywalker · April 12, 2010

overflow: auto;

mishka · April 12, 2010

overflow: auto;

А проверь ка работу overflow: auto;

Вынеси ка из него чтонить абсолютом.

psywalker · April 12, 2010

Понял, ну а так не пойдёт?

display: inline-block; родителю

s0rr0w · April 12, 2010

HTML, CSS - делаете сами, колличество блоков и их свойства это на ваше усмотрение.
ну есть такой себе боксик с какимто описанием товара, и в уголку так маленький кружочек с буковкой например "i" при наведении на него получается такой блок побольше, который выступает за пределы нашего боксика, и в нем какаято дополнительная инфа. Этот блок с доп инфой например на абсолюте висит. Также внутри есть флотнутые элементы.
короче - нужно сделать так чтобы ничего не выпадало, но при этом и не обрезалось. Также флотать внешний элемент нельзя, чтобы поток был чистым. Типа float:left;clear:both; нельзя юзать.
Когда ктонить из новичков спрашивает "как сделать чтобы не вылазило" - то ему всегда отвечают overflow:hidden; Вот мне стало интересно кто как в подобных случаях, как я описал, поступает.

Дизайн нужен. Потому что приведенный пример не учитывает

1. Как ведет себя бокс, когда ему не хватает места справа?

2. Минимальная и максимальная ширина бокса?

3. Как ведет себя бокс, когда ему не хватает места снизу?

4. Минимальная и максимальная высота бокса?

5. Какие элементы кроме маленького кружочка с буковкой могут служить активатором данного попапа?

Без ответов на данные вопросы я даже и пальцем не пошевелю в сборке.

Sign In

Свойство margin-top

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information