Помогите разобраться с margin

Inf1k · May 4, 2011

Собственно только начал осваивать верстку и сразу попал в тупик с выравниванием блоков. Я хочу чтобы внутрение блоки имели отступы между собой и от границы родительского блока. Покажу лучше на примере. Вот что нужно:

И вот что имею:

Если задать padding родительскому блоку(класс item_list) то отступ от границ получиться margin + padding.

Сам код:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

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

<style type="text/css"> 

* {
    margin: 0;
    padding: 0;

}

#container {
    width: 600px;
    margin: 0 auto;
}

.item_list {
    background-color	: #333;
    margin-bottom       : 20px;
}

.item {
    background-color    : #ffffee;
    margin       	: 5px;
}

.fl-l {
    width		: 294px;
    float		: left;
    border-right        : 1px solid black;
}

.fl-r {
    width		: 295px;
    float		: right;
}

.clear {
    clear : both;
}

</style> 

</head> 

<body> 

<div id="container"> 

	<div class="item_list"> 

		<div class="item"> 
		    <div class="fl-l"> 
		        left
		    </div> 
		    <div class="fl-r"> 
				right
		    </div> 
		    <div class="clear"></div> 
		</div> 

		<div class="item"> 
		    <div class="fl-l"> 
		        left
		    </div> 
		    <div class="fl-r"> 
				right
		    </div> 
		    <div class="clear"></div> 
		</div> 

		<div class="item"> 
		    <div class="fl-l"> 
		        left
		    </div> 
		    <div class="fl-r"> 
				right
		    </div> 
		    <div class="clear"></div> 
		</div> 

	</div> 

</div> 


</body> 
</html>

Temiks · May 4, 2011

.fl-l и .fl-r задайте padding

ps советую вам это сделать не на блоках, а на таблице

Inf1k · May 4, 2011

.fl-l и .fl-r задайте padding
ps советую вам это сделать не на блоках, а на таблице

Нет, это задаст отступ внутри блоков .fl-l и .fl-r. А мне нужно сделать отступ между элементами с классом .item. Сейчас у них стоит margin со значением 5px, но этот отступ не действует в первом(margin-top) и последнем(margin-bottom) элементах.

Ну если не знайду решения этой проблемы то конечно попробую на таблицах все это зделать...

Searcher · May 4, 2011

overflow:hidden - родителю

Inf1k · May 4, 2011

overflow:hidden - родителю

ООО! Спасибо! Заработало, даже не знаю как это свойство повлияло. Но в ИЕ6 увы что-то не хочет работать, выдает следующее:

Есть какие то идеи как это починить?

psywalker · May 4, 2011

overflow:hidden - родителю
ООО! Спасибо! Заработало, даже не знаю как это свойство повлияло. Но в ИЕ6 увы что-то не хочет работать, выдает следующее:
Есть какие то идеи как это починить?

Есть. Для ИЕ6 пропиши zoom:1;

Inf1k · May 4, 2011

Есть. Для ИЕ6 пропиши zoom:1;

Ура! Спасибо ребята! Все работает!!

psywalker · May 4, 2011

Есть. Для ИЕ6 пропиши zoom:1;
Ура! Спасибо ребята! Все работает!!

Вот и отлично!

Sign In

Помогите разобраться с margin

Question

Inf1k

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Temiks

Link to comment

Share on other sites

Inf1k

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Inf1k

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Inf1k

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information