margin-top для p опускает div

Krote · June 29, 2012

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style>
*{margin:0;padding:0;}
.bl_1{
	height:54px;
	width:403px; 
	background:#000; 
	font-size:27px; 
	color:#fff; 
	font-weight:bold;
}
.bl_1 p{
	text-align:center; 
}
.bl_2{
	background:#ffd500; 
	width:136px;
	height:49px;
	margin:3px 3px 2px 3px; 
	color:#000; 
	float:left;}
.bl_2 p{text-align:center;margin-top:10px;}

</style>
</head>

<body>
<div class="bl_1"><div class="bl_2"><p>АВТО</p></div><p>ХИМЧИСТКА</p></div>
</body>
</html>

Такая проблема нужно опустить химчистку на 10px вниз, если я для p пишу margin-top:10px; то опускается весь div, как исправить или как лучше переделать эту фигню? Я конечно мог бы и картинкой такую же вставить, но в ТЗ нужно именно текстом...

Sensei · June 30, 2012

В вашем случае нужно просто, задать блоку с классом "bl_1" верхний паддинг в 1px, чтобы параграфам было от чего отступать.

Но я бы сделал примерно так

http://jsfiddle.net/sensei/Yca8k/3/

Sign In

margin-top для p опускает div

Question

Krote

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Sensei

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information