Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2012, 08:53
Аватар для antserg
Аспирант
Отправить личное сообщение для antserg Посмотреть профиль Найти все сообщения от antserg
 
Регистрация: 14.05.2011
Сообщений: 61

Свойство margin в блочных элементах
Здравствуйте. Допустим есть два блока (один блок находится внутри другого), мне нужно внутреннему блоку придать верхнему марджину отступ 20px, а левому марджину в 10px. Прописываю внутреннему блоку:
margin: 20px 0 0 10px;
В результате влево есть отступ 10px, все правильно, а вот сверху тоже есть отступ, но не внутреннего блока, а ОБОИХ блоков на эти 20px. Подскажите пожалуйста почему так.

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="b-1">
    <div id="b-2"></div>
  </div>
</body>
</html>


Код:
#b-1{
  background: #00f;
  width: 200px;
  height: 200px;
}
#b-2{
  background: #f00;
  width: 100px;
  height: 100px;
  margin: 20px 0 0 10px;
}
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2012, 09:26
Профессор
Отправить личное сообщение для bot87 Посмотреть профиль Найти все сообщения от bot87
 
Регистрация: 16.05.2011
Сообщений: 307

Это называется слияние margin.
http://htmlbook.ru/samlayout/blochna...hiesya-otstupy.
Почитай ,там есть варианты ,которые помогут тебе.

может тебя устроит вариант присвоить родителю display:inline-block
__________________
Я только учусь.Ногами просьба не бить

Последний раз редактировалось bot87, 02.09.2012 в 09:28.
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2012, 09:33
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Просто нун начальное обнуления
margin:0;
padding:0;
делать и бордеры прописать (у браузеров дефолтные отступы


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
  margin:0;
  padding:0;
}
#b-1{
  border:1px solid transparent;
  background-clip:border-box;
  background: #00f;
  width: 200px;
  height: 200px;
}
#b-2{
  border:1px solid transparent;
  background-clip:border-box;
  background: #f00;
  width: 100px;
  height: 100px;
  margin: 20px 0 0 10px;
}

</style>

</head>
<body   style="background: #74CB74;">
  <div id="b-1">
    <div id="b-2"></div>
  </div>
</body>
</html>

Последний раз редактировалось Deff, 02.09.2012 в 10:34.
Ответить с цитированием
  #4 (permalink)  
Старый 02.09.2012, 09:46
Профессор
Отправить личное сообщение для bot87 Посмотреть профиль Найти все сообщения от bot87
 
Регистрация: 16.05.2011
Сообщений: 307

Deff интересный способ.
__________________
Я только учусь.Ногами просьба не бить
Ответить с цитированием
  #5 (permalink)  
Старый 02.09.2012, 09:54
Аватар для antserg
Аспирант
Отправить личное сообщение для antserg Посмотреть профиль Найти все сообщения от antserg
 
Регистрация: 14.05.2011
Сообщений: 61

Deff,
Ну margin и padding в ноль, это понятно. А вот при чем здесь бордеры - не понятно. Ведь без них не получится. Или здесь не нужно понимать, нужно просто запомнить, так как это какой-нибудь хак?
bot87,
Спасибо за ссылку, буду изучать
Ответить с цитированием
  #6 (permalink)  
Старый 02.09.2012, 09:57
Профессор
Отправить личное сообщение для bot87 Посмотреть профиль Найти все сообщения от bot87
 
Регистрация: 16.05.2011
Сообщений: 307

прочитаешь ссылку ,тогда поймешь
__________________
Я только учусь.Ногами просьба не бить
Ответить с цитированием
  #7 (permalink)  
Старый 02.09.2012, 10:03
Аватар для antserg
Аспирант
Отправить личное сообщение для antserg Посмотреть профиль Найти все сообщения от antserg
 
Регистрация: 14.05.2011
Сообщений: 61

Понял, буду читать.
bot87,
Deff,
спасибо за помощь, все получилось.
Ответить с цитированием
  #8 (permalink)  
Старый 02.09.2012, 10:03
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

bot87,
Да ну нафег - рутина, а ссылка полезная

Добавил background-clip:
Ответить с цитированием
  #9 (permalink)  
Старый 02.09.2012, 10:54
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,520

Цитата:
background-clip:
Ословоды негодуют!
__________________
29375, 35
Ответить с цитированием
  #10 (permalink)  
Старый 03.09.2012, 13:15
Профессор
Отправить личное сообщение для Nanto Посмотреть профиль Найти все сообщения от Nanto
 
Регистрация: 21.12.2010
Сообщений: 243

типовое решение:
#b-1{overflow:hidden;}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как понять, какому объекту принадлежит свойство? Елена-Котяра Events/DOM/Window 1 16.02.2012 02:19
Свойства объекта, методы и this. Почему свойство вызывается с () ? jsuse Общие вопросы Javascript 2 04.11.2011 20:39
Объект не поддерживает это свойство или метод load_081112_0953.js 1auto1 Общие вопросы Javascript 1 13.04.2011 22:09
Объект не поддерживает это свойство или метод load_081112_0953.js 1auto1 Internet Explorer 1 13.04.2011 21:59
если (свойство css == 2) свойство css = 1; funkypublic Events/DOM/Window 1 09.06.2010 17:39