Проблема с margin

Rombs · October 10, 2012

Добрый день!

Решил сверстать интерфейс приложения.

С HTML знаком, но далеко не профи.

HTML страницы


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ITP</title>
	<style>
html {
	height: 100%;
}

body{
	margin: 0px;
	padding: 0px;
	border: 0px;
}

div#top{
	width: 960px;
	min-height:70px;
	height:auto !important; 
	height:70px; 
	background-color: green;
	background: url("./img/top/logo.png") no-repeat,
                url("./img/top/squares.png") no-repeat 100% 0,
                url("./img/top/bg.png") repeat-x;
	overflow: hidden;
	border: 0px red solid;
}

div#top div#menu{
	width:		210px;
	min-height:	20px;
	height:		auto !important; 
	height:		20px;
	float:		right;
	margin:		40px 10px 0 0;
	border:		0px red solid;
}

div#top div#menu span.separator{
	font: bold 18px Arial;
	color: #FFFFFF;
}

div#top div#menu a{
	font: bold 12px Arial;
	color: #FFFFFF;
	text-decoration: none;
}

div#top div#menu a:HOVER{
	text-decoration: underline;
}

div#canvas{
	width: 960px;
	min-height:698px;
	height:auto !important; 
	height:698px;
	background: url("./img/canvas/bg.png");  
	border: 0px red solid;
}

div#canvas div#tabs{
	margin: 100px;
	border: 1px red solid;
}
	</style>
</head>
<body>
	<div id="top">
		<div id="menu">
			<a href="#">Рабочий стол</a>
			<span class="separator"> | </span>
			<a href="#">Настройки</a>
			<span class="separator"> | </span>
			<a href="#">Выйти</a>
		</div>
	</div>

	<div id="canvas">
		<div id="tabs">
			aaa
		</div>
	</div>
</body>
</html>

В общем не могу понять, почему из-за div#tabs поехал div#canvas - я думал, что отступ от него будет.

Заранее спасибо!

ils · October 10, 2012

Вместо

div#canvas div#tabs{
    margin: 100px;
    border: 1px red solid;
}

#canvas {
    padding: 100px;
}
#tabs{
    border: 1px red solid;
}

Вы об этом???

И незачем воротить конструкции вроде:

div#top div#menu a:HOVER

достаточно:

#menu a:hover

Rombs · October 11, 2012

Добрый день!

Спасибо за ответ - padding использовать можно, но я хочу понять почему так странно себя ведет margin?

Я вычистил страницу от "мусора" и привожу конечный вариант:


<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>ITP</title>
        <style>
html {
        height: 100%;
}

body{
        margin: 0px;
        padding: 0px;
        border: 0px;
}

div#top{
        width: 960px;
        height:70px; 
        background-color: blue;
        border: 0px red solid;
}

div#canvas{
        width: 960px;
        height:100px;
		background-color: green;
        border: 0px red solid;
}

div#tabs{
        margin: 10px;
        border: 0px red solid;
}
        </style>
</head>
<body>
        <div id="top"></div>
        <div id="canvas">
			<div id="tabs"></div>
		</div>
</body>
</html>

Ума не приложу, почему canvas сдвигается вместе с tabs?

При этом заметил странную "фишку" - если сделать так


<div id="canvas">some text
	<div id="tabs"></div>
</div>

или так (сделать border видимым)


div#canvas{
        width: 960px;
        height:100px;
		background-color: green;
        border: 1px red solid;
}

то все приходит к ожидаемому виду.

Заранее спасибо за помощь.

Edited October 11, 2012 by Rombs

mrnobody · October 11, 2012

http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/

http://www.xiper.net/learn/css/box-model/margin-collapsing.html

Edited October 11, 2012 by mrnobody

Rombs · October 11, 2012

http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/
http://www.xiper.net/learn/css/box-model/margin-collapsing.html

Ептишь - моптишь... первая ссылка просто офигенная. Прчтиал весь цикл статей про CSS.

Думал, что лучше чем на этом сайте инфы не надыбаю, а вот на те...

Спасибо, все понял. Причем даже больше, чем расчитывал ) многие вопросы в голове улеглись - хорошо так

Sign In

Проблема с margin

Question

Rombs

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

ils

Link to comment

Share on other sites

Rombs

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Rombs

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information