Форум Сайтостроение Веб-строительство

Небольшой вопрос по html-верстке.

S
На сайте с 06.09.2011
Offline
16
startup
341

Добрый вечер.

Есть html-код: 


<!doctype html>

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<title></title>

	</head>

	<body>

		<div id="main"></div>

	</body>

</html>

и css 

*{margin: 0px; padding: 0px;}

body{background: #000;}

html, body, #main{min-width: 100%; height: 1px;}

#main{position: absolute; width: 800px; left: 50%; margin-left: -400px; background: #fff;}

Как сделать отступы по 20px вокруг #main без появления полосы прокрутки?

Т.е. что бы не впритык в окне было?

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

eis
На сайте с 18.10.2008
Offline
473
eis
#1

в css

#main {
margin: 20px;
}
- Здесь я покупаю вечные ссылки на свои сайты! (https://backlinkator.com) - сотни ссылок за копейки
M
На сайте с 02.05.2013
Offline
21
miiini
#2

Уменьшить ширину-высоту блока на размер отступа padding

Отступ увеличивает размер блока на величину отступа

[Удален]
#3

Можно спросить цель этого кода? #main выровнять по центру? Тогда в Вашем коде много лишнего (html, body - указана высота 1, уже лишний код, так как этого не будет:) + min-width ie7 не понимает). Если Вам нужно именно position: absolute, тогда вот так. 

* {
	margin: 0px; 
	padding: 0px;
	}
html, body {
	width: 100%; 
	}
body {
	background: #000;
	}
#main {
	position: absolute; 
	width: 800px; 
	left: 50%; 
	margin: 20px 20px 20px -400px; 
	background: #fff; 
	height: 1px; 
	}

Если в #main у Вас будут вложены другие блоки выше 1px, тогда смысла с height: 1px; нет, и можно смело его удалять.

U
На сайте с 05.03.2013
Offline
34
ubriaco
#4

Цель какая? Если 20px вокруг, то:


#main {
	padding: 20px;
	height: 1px;
}

Если выровнять по центру, то:


#main {
	width: 800px;
	margin: 20px auto;
	height: 1px;
}

Этот мусор, конечно, убрать:

html, body, #main{min-width: 100%; height: 1px;}
.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий