margin и border

icp · January 3, 2011

День добрый.

Подскажите, пожалуйста, почему если убрать бордер у #content, то бокс совпадает по высоте с .toolbar ??? А возвращаешь бордер и становится все нормально.

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!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>TODO supply a title</title>
		<style>
			body {
				background:	#eff6fc;
				font:		13px Arial, Tahoma, sans-serif;
				margin:		0;
				padding:	0;
			}
			#wrapper{
				margin:		0 auto;
				width:		1000px;
			}
			#header{
				height:		246px;
				border:		1px black dashed;
			}

			#content{
				margin:		  13px 0;
				border:		  1px black dashed;
				background-color: white;
			}
			.toolbar{
				margin:		100px;
				height:		200px;
				background:	gray;
			}


			#footer{
				height:		246px;
				border:			1px black dashed;
			}


		</style>

	</head>
	<body>
		<div id="wrapper">
			<div id = "header"></div>

			<div id = "content" >
				<div class="toolbar">


				</div>
			</div>

			<div id = "footer"></div>
		</div>
	</body>
</html>

deadrash · January 3, 2011

Вместо бордера используйте padding:1px; иначе маргину не от чего отталкиваться, блок пустой.

upd> хотя можете и бордер использовать, его можно прозрачным делать - border:1px solid transparent;

Edited January 3, 2011 by deadrash

icp · January 3, 2011

Вместо бордера используйте padding:1px; иначе маргину не от чего отталкиваться, блок пустой.
upd> хотя можете и бордер использовать, его можно прозрачным делать - border:1px solid transparent;

Спасибо за вариант. Решил по другому немного. Дописал в .content overflow: hidden; и заработало. Только не понял, почему именно hidden а не visible решает эту проблему???

И разве блок от блока не может отталкиваться, несмотря на то что он пустой?

Edited January 3, 2011 by icp

Sign In

margin и border

Question

icp

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

deadrash

Link to comment

Share on other sites

icp

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information