Поговорим о margin, он же маргин( часть 1-я )

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

Начинающим верстальщикам она точно будет полезна, а вот профессионалам — сомневаюсь, так как человек занимающийся не первый год версткой уже обязан «вызубрить» наизусть все особенности данного свойства.

В этой части статьи я напишу о вертикальном маргине. О горизонтальном поговорим в следующей части.

Для начала, разберем вкратце, какие есть единицы измерения, что они означают и какие использовать для отступов маргин.

Cm, mm, inch, pc, pt – абсолютные единицы измерения. Рекомендуется использовать при печати документов.

Px, em, ex, % — относительные единицы, используются для мониторов.

Для маргина, я использую px и %, а em – для указания размеров шрифта. Ex( в IE ex = em / 2 ) – использовать не рекомендую, т.к в каждом броузере интерпретируется по-разному.

И вообще, в какой единице вы бы не указали отступ или размер шрифта: броузер все преобразовывает в пиксели, не учитывая при этом область просмотра.

Область просмотра – то, на чем пользователь видит содержимое сайта, не прокручивая при этом экран. У каждого пользователя она разная.

Каждый верстальщик знает, что любой элемент можно представить в виде 4 областей( маргин, бордер, паддинг и контент ).
image
Маргин – внешний отступ. По вертикали и горизонтали построение маргин разные.

Как я уже писал выше, размеры для маргина могут проставляться в em, ex, px – жесткое задавание и в % — считаются относительно какой-то области.

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

Есть 2 дива: first и внем див second.
image
#first{
padding: 100px;
background: #b5bcbc;
}
#second{
height: 100px;
background: #b06b48;
margin: 30% 0 0;
}

Прошу обратить внимание что свойство width я не задал ни одному диву(об этом поговорим позже). Сейчас нас интересует только маргин, который равен margin: 30% 0 0;

Я надеюсь, что все знают, как считается маргин в данном случае, на всякий случай напомню, что считается по часовой стрелке, тоесть: сверху отступ будет 30%, справа — 0, снизу — 0 и слева, — так как я ничего не указал, то маргин принимает значение противоположной стороны, тоесть в данном случает, если маргин справа равен 0, то маргин слева, если не указан, тоже равен 0.

Но сейчас нас интересует маргин, который равен 30%, он же отступ сверху. Откуда же берутся эти 30%?

Многие считают и считают неверно, что 30% берутся от верхней части всей страницы.
image
Но это неверно!

Так как в данном случае, див second вложен в див first, то margin-top:30% будет считаться относительно ширины родительского дива second, тоесть относительно ширины дива first!
image
В данном случае ширина дива first по умолчанию авто, поэтому див принимает все свободное пространство по ширине, а из этой ширины будут высчитываться 30% маргин-топ для дива second.

При уменьшении родительского дива, будет и уменьшаться отступ сверху у дива second.

Маргин также может быть и отрицательный. В этом случае элемент по вертикали позволяет «заехать» на себя другому элементу или «выехать низу» за пределы своего контейнера.

Например: два дива, лежащие один под другим.

image
если мы добавим первому диву margin-bottom: -100px, а второму margin-top: -50px
#first{
height: 200px;
background: #69c;
margin: 0 0 -100px;
}
#second{
height: 200px;
background: #f60;
margin: -50px 100px 0;
}

то произойдет следующее.
image
Но… тут и наступает большая ошибка новичков.

Многие думают, что так как верхний див имеет маргин-боттом -100px, а нижний див, маргин-топ -50px, то нижний див «заедет» на верхний на -150px.

Ошибка!

Если маргины одноименные( оба маргина или отрицательное или положительное число ), то в таком случае берется большое число по модулю, а меньшее не учитывается.

В данном случае нижний див «заедет» на верхний див на 100px, а 50px учитываться не будут.

Тоже самое верно и для положительных маргинов, нижний див «уедет» от верхнего на 100px, а 50px учитываться не будут.

Рассмотрим следующий пример.
Есть 2 дива, один под другим.
image
#first{
height: 200px;
background: #69c;
margin: 0 0 -100px;
}
#second{
height: 200px;
background: #f60;
margin: 50px 100px 0;
}

first
second

Как видите маргин-боттом первого — отрицательный, а маргин-топ второго — положительный, что произойдет в данной ситуации?

Для разноименных маргинов произойдет сложение, тоесть: -100 + 50 = -50. Соответственно нижний див поднимиться на 50px вверх.

Едем далее.

Два дива, один вложен в другой.
image
#first{
background: #b5bcbc;
}
#second{
height: 200px;
background: #b06b48;
}

Если в цсс добавить внутреннему диву маргин-топ 200px,
#second{
height: 200px;
background: #b06b48;
margin-top: 200px;
}


То, вот тут то и очередная ошибка! Некоторые считают, что внутренний маргин, должен «отодвинуться» от своего родителя на 200px вниз а его родитель останется на месте, и тем самым растянется.
image
Но, как бы не так!

Если у родительского эл-та нет ограничивающих факторов ( об этих факторах напишу чуть ниже ), то маргин переходит от внутреннего элемента к внешнему. Потом по старой схеме выбирается маргин: если они одноименные, то выбирается больший, если разноименные, то происходит сложение.
И результат
image
Но, как быть, если нам это не нужно и мы хотим, чтобы див-родитель остался на своем месте, а див-ребенок отодвинулся на 200px вниз?

Можно отменить это действие по отношению к родителю, есть несколько способов.
1. задавание padding родительскому блоку
2. задавание border родительскому блоку
3. задавание overflow родительскому блоку, любое значение кроме visible( работает везде, кроме старых ИЕ )
И вуаля
image
Спасибо за внимание, надеюсь мне удалось прояснить новичкам, что такое маргин и как правильно и откуда его считать.
Если статья оказалась полезна и есть желание читать продолжение, то в следующей части я опишу о горизонтальных маргинах. Там дела обстоят не так просто, как кажется на первый взгляд ;)
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 163
  • +18
    Почему то всегда называл маржин и браузер.

    Если внутреннему блоку поставить position: absolute, то в хроме margin-top: n% начинает считаться от высоты родительского блока.
    • +3
      по поводу названий не проверял :)
      а вот position здесь, как вы видите, не описывал.
      При установке position:absolute дочернему блоку, его проценты, в любом случае будет счатиться от родительского, не только в Хроме, но в остальных браузерах. Если я не ошибаюсь :)
      • +2
        В мозилле от ширины, а в хроме вертикальный margin от высоты:

        • 0
          Возможно, я, как уже писал position здесь не описываю, а только стандартное поведение margin согласно спецификации, а то что вы пишете — полезная вещь, но я не помню, чтобы подобное было написано в спецификации, это скорее прихоть браузеров.
          Но вещь полезная, спасибо! Буду знать на будущее! :)
          • 0
            То есть то, что высотный маргин берётся от ширины — это часть спецификации? Мне почему-то всегда казалось что в HTML ширина и высота — как градусы и килограммы, ни в одной формуле не перемешиваются.
            • +3
              вы не единственный кому это казалось
              • +1
                Если значение width элемента div изменится, изменится также и верхнее поле. Кажется странным? Считаем, что высота большинства элементов в нормальном потоке (как мы предполагаем) такова, чтобы вместить их элементов потомков, включая поля. Если верхнее и нижнее поля элемента задать как процент от высоты родителя, это может привести к бесконечному циклу: высота родителя увеличивалась бы, чтобы вместить верхнее и нижнее поля, которые затем должны были бы увеличиться соответственно новой высоте и т. д.

                Вместо того чтобы просто игнорировать процентные значения для верхнего и нижнего полей, авторы спецификации решили соотнести их с шириной родительского элемента, которая не меняется в зависимости от ширины его потомков.

                Обработка процентных значений для верхнего и нижнего полей
                абсолютно позиционированных элементов отличается и более
                подробно рассмотрена в главе 10.
                Eric A. Meyer «Cascading Style Sheets: The Definitive Guide»
    • +8
      Специально для вас компания ABBYY записала правильное произношение слова margin: lingvo.yandex.ru/margin/
      • +2
        Спасибо :) а я все искал, как же он пишется :)
      • –42
        Вроде бы хорошая статья, но читать невозможно. Переведите слова на русский, пожалуйста:
        margin, «маргин» — поле
        div, дви — блок

        Соответственно, «маргин-топ» — верхнее поле, «маргин-боттом» — нижнее поле и т. д. Такое ощущение, что вы статью на коленке в метро писали. Спасибо, конечно, но хочется более ясного изложения ваших мыслей. Уважайте своих читателей.

        А так и до середины не дочитал, дальше по диагонали просмотрел.
        • –4
          Обязательно отредактирую, только завтра :)
          • +5
            автор, прекрасная статья, не слушайте дурных советов)
          • +19
            <mithgol-mode>А браузер — на «обозреватель»</mithgol-mode>
            • 0
              Что это за чепуха? Вы когда-нибудь видели, чтобы я называл браузер «обозревателем»?
            • +14
              некоторые названия не стоит никак переводить, а лучше писать в оригинальном виде. В случае автора я бы порекомендовал, ещё и латиницей.

              Иначе скоро мы придём к начинающим разработчикам которые будут спрашивать, почему так не работает?

              Блок.Верхний_текст { нижнее-поле: 10см; }
              • –9
                Латиницей — идеальный вариант. Но если уж пишут кириллицей, так хотя бы слова русские надо использовать.
                • +9
                  Ладно Вам, профресурс же, все поймут, что margin=маргин=поле.
                  • +1
                    Русские слова — это лапоть/водка/полено. Для айти IT не канает.
                  • +4
                    напомнило код на 1С :) Не дай Господь такого в веб-дизайне!
                  • +4
                    А компьютер вы называете ЭВМ?
                    • –3
                      Любую идею можно довести до абсурда.
                      • +2
                        Просто Мария машина. :)
                      • +26
                        Руки прочь от проф. жаргона, проклятые филологи.
                        • 0
                          Да ладно, зачем человека заминусовали — читать действительно сложно, такое впечатление, будто автор не из России, очень много опечаток и речевых, орфографических и пунктуационных ошибок.)
                          • –1
                            Иногда становится очень жаль, что статьи не просматривает корректор.
                            • 0
                              Уважаемый folgakauchuk во-первых к вашему сведенью, я не из России;
                              во-вторых: как вы хотели, чтоб я написал margin по-русски? некоторые здесь предлагали «поле», тоесть читалось бы намного лучше и понятнее, если б я писал поле-вверх, поле-слева и т.п. тогда по вашему мнению меня было бы проще понять?
                              в-третьих: если в статье и были ошибки, то только потому, что статья не маленькая, писалась быстро. Хорошие люди помогли, — видя ошибки — писали мне в личку — я их сразу исправлял.
                              Дождитесь пожалуйста продолжение статьи, там я учту все пожелания и напишу так, чтоб всем было приятно читать.
                              Спасибо
                        • 0
                          уважаемые читатели, определитесь пожалуйста на кокой именно термин мне исправить слово «маргин» и слово «браузер», а то ваши предпчтения расходятся :)
                          • –6
                            Margin — поле. Так написано в англо-русском словаре и в традициях книгопечатания (откуда и было выдернуто w3c в своё время).
                            • +17
                              Маргин (или марджин) вполне устоявшийся термин в среде веб-верстальщиков. Статья написана для начинающих, и думаю, что изначально нужно прививать им терминологию, на которой общается большинство в данной сфере. Не нужно пугать русифицированными вариантами «поле» (в случае с margin) или «отступ» (в случае с padding). И как-то тут все-таки веб-верстка, а не книгопечатание.
                              Статья очень хорошая и доходчивая. Спасибо.
                              • +3
                                проходя тест на intuit.ru я охренел, когда меня спросили как правильно задать отступ для блока и предложили выбрать либо margin, либо padding. у меня в голове отступ — это margin, а оказалось padding. ну нахер эти переводы, тех. литературу надо читать на английском.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                • +4
                                  Вы же не пишете название компании Apple по-русски как Яблоко. Иногда можно встретить Эппл, чаще всего Apple, но никак не Яблоко. То же самое касается, например, Майкрософт. Мелкомягким его называют лишь в качестве шутки-юмора. Мне как верстальщику, куда более удобно читать «маргин» или «margin» чем поле. Поле, это там где скот пасут. У нас в вэбе это маргин/марджин.
                                • +4
                                  Ничего не исправляйте, нормально читается без всякого напряга. Статья о верстке => целевая аудитория — верстальщики и иже с нами => менять «маргин» на «поле» глупо. Имхо.
                                  • +3
                                    да не надо ничего исправлять! В css пишется margin, а не «поле». Все правильно вы написали.
                                    • +6
                                      можно оставить как есть (но ни в коем случае не менять «маргин» на «поле»).
                                      но с моей точки зрения лучше заменить «маргин» на «margin».
                                      • 0
                                        >лучше заменить «маргин» на «margin».

                                        Поддерживаю, каждый прочитает это так, как ему удобнее.
                                    • 0
                                      ИМХО, Вы неверно указываете ширину блока first.

                                      На рисунке в статье ширина блока first (от которой считается 30% вложенного блока) указана голубоватой стрелкой как расстояние от левого края блока до правого.

                                      Но это неверно. Ширина блока не включает отступы (говорим про обычный, не quirks, режим).

                                      Ширина блока в модели W3C это ширина content (без padding).

                                      image

                                      • 0
                                        я и не имел в виду отступы паддинг, в этой статье все отступы паддинг обнулены
                                        • +3
                                          В первом примере:

                                          padding: 100px;

                                          ?
                                        • +1
                                          Так было до IE5 включительно. В IE6 уже используется W3C Box Model. Если указан доктайп, Естественно.
                                          Хотя мне всегда больше нравилась IE BM
                                          • 0
                                            Мне тоже)) Но теперь, слава богу есть box-sizing
                                            • +1
                                              А также, черт побери, -moz-box-sizing и -webkit-box-sizing. Но они есть и это уже прекрасно
                                        • +6
                                          хорошая статья, и явно не для филологов, я бы ничего не понял если бы слово маргин былобы переведено в «поле».
                                          • +1
                                            вот и я о том же
                                            • +1
                                              По-моему, читалось бы лучше:
                                              Видя, когда новички верстая страницу за страницей, допускают кучу ошибок, делая поля (margin) и до конца не понимая, как эти самые поля на самом деле работают, я решил написать данную статью.
                                              • +7
                                                Есть устоявшиеся слова и выражения. Я подхожу к верстальщику и говорю — у тебя здесь маржин слишком большой. Если я скажу «поле», он будет искать форму на странице.
                                                • +1
                                                  В разговоре (да даже в комментах) я скажу «лучше эту переменную спрятать на всякий пожарный», а в статье напишу «это свойство объекта должно быть инкапсулировано для избежания неотслеживаемых объектом модификаций».
                                                  • +1
                                                    По аналогии с комментарием:

                                                    «это свойство предмета (объекта) должно быть инкапсулировано для избежания неотслеживаемых предметом модификаций»

                                                    Я конечно не разбираюсь в ООП, но вот и я предложил называть объект предметом (от лат. objectum — предмет), так-же как поле вместо margin.
                                            • +1
                                              Вы закруглили мне гештальт!
                                              С одной стороны, как минимум половина этих особенностей была в свое время набита лбом, с другой — на некоторые даже не натыкался.
                                              • 0
                                                Вы закруглили мне гештальт! — не совсем понял, что это значит, надеюсь, что помог вам :)
                                                • 0
                                                  В будущем определенно помощь я почувствую.

                                                  А «закруглить гештальт» — означает, что какой-то мутный вопрос вдруг обрел чистоту и понятность.
                                                  Хотя буквальное значение несколько иное (если в словаре посмотреть), но используется эта роскошная фраза именно так.
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                • 0
                                                  Не фига они не абсолютные. Поставляю одно разрешение — будет у них один физический размер, поставлю другое — будет другой.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                    • 0
                                                      Как у абсолютной величины может меняться физический размер? Как одному физическому размеру на одном и том же устройстве может соответствовать разное количество одних и тех же абсолютных единиц? Или вы хотите сказать, что сантиметр или дюйм являются относительными величинами?
                                                      • 0
                                                        Если менять пространство, то да. очевидно же.
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                          • 0
                                                            Согласен, был неправ, действительно по CSS2.1 пиксель теперь абсолютная физическая величина. Но вот согласно спецификации он должен быть 1/96 дюйма, а не соответствовать физическому пикселю на мониторе. То, что сейчас пиксель в вёрстке всегда соответствует пикселю на мониторе, является нарушением спецификации. Причём браузеры прекрасно умеют работать с реальными разрешениями устройств вывода и не нарушают спецификацию например при печати, печатая страницу одним размером и при разрешении 300 dpi, и при 600, и при 1200, но почему-то игнорируя dpi монитора, нарушая спецификацию.
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                              • 0
                                                                А какая разница, если на принтере он 1/72 дюйма, а на экране 1.3(3) физических пикселя? Браузеры не только для px не проверяют разрешение, но и для pt, in, mm на мониторе считают, что оно 96 dpi, даже если ОС знает, что 114, например.

                                                                Нет рабочего способа изобразить на экране шрифт высотой 12pt (1/6 дюйма) — он будет 16 физических пикселей. Последним сдался из популярных браузеров Firefox, насколько я знаю. В угоду совместимости с остальным браузерами его разработчики тоже решили нарушить спецификацию и считать, что для media=«screen» разрешение всегда 96 dpi, а не то, что сообщает ОС.
                                                            • 0
                                                              Все что касается единиц измерения, я описал в новой статье
                                                        • 0
                                                          margin-top: 10px; в любом месте страницы будет ровно 10px (абсолютно). Em, ex и % в зависимости от того где лежит целевой элемент (относительно).
                                                          • +1
                                                            Это раньше так было, в CSS 2. А в CSS 2.1 браузерные пиксели отвязаны от экранных и привязаны к дюймам.
                                                            • 0
                                                              К сферическим дюймам в вакууме, а не к размеру монитора.
                                                              • 0
                                                                И сколько пикселей в дюйме?
                                                                • 0
                                                                  Сам нашёл. Пиксель равен 0.75 пункта, то есть в дюйме 96 пикселей. То есть в нормальном браузере единица пиксель теперь не должна соответствовать физическому пикселю монитора…
                                                                  • 0
                                                                    …Однако, эксперимент показал, что это дюйм не соответствует физическому дюйму. Сделал блок высотой в 11in, как раз умещающийся на экране по вертикали, понизил разрешение монитора — и блок умещаться перестал. Значит или Firefox 4 не нормальный браузер, или пиксели всё-таки равны.
                                                                    • 0
                                                                      Не помню, когда он перестал быть нормальным в этом смысле. В 3.0 дюймы точно отображал нормально (если ОС сообщала правильные значения), в 4.0 уже точно считал, что не «логический» пиксель равен 1/96 физического дюйма, а что «логический» дюйм равен 96 физическим пикселям. Вебкит (хром, сафари) с рождения так считал, насчёт ИЕ не уверен, может ИЕ считает и правильно, да только ось всегда сообщает 96, а может как и в остальных захардкожено.
                                                                      • 0
                                                                        Зато я помню, проверял недавно. CSS 2 (а не CSS 2.1, устанавливающим, что дюйм равен 96 пикселям) в этом отношении следовали IE до 7-й версии включительно, Opera до 10-й версии включительно и Firefox до 3-й версии включительно.

                                                                        Только на практике это не означало правильного отображения дюйма. На практике это означало тот же самый мнимый дюйм, но с поправкой на указанный в Windows экранный масштаб. То есть на моей домашней машине, где установлено значение 120 точек на дюйм, дюйм считается в этих браузерах на четверть больше (и соответственно ещё сильнее отклоняется от реального значения).
                                                                        • 0
                                                                          Моя ОС (Линукс/Убунту) сообщала правильные значения (115 dpi при 1600х1200) и дюймы отображались в ФФ нормально.
                                                                  • 0
                                                            • 0
                                                              А у всех этих фактов есть какое-то логичное происхождение? Что высота считается в процентах от ширины, а атрибут А наследуется родителем (!), если у того не определен атрибут Б?
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                • +1
                                                                  Это формализация. Интересно, какова разумная причина.
                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                • +2
                                                                  > Что высота считается в процентах от ширины

                                                                  margin:10%
                                                                  От высоты его в принципе посчитать нельзя, но зато можно сделать одинаковым со всех сторон если считать от ширины — более чем здравое решение.

                                                                  Вертикальные отступы — надо понимать их смысл, это отступы до содержимого, промежутки между абзацами и заголовками. Текст в данном случае первичен. Это не отступ потомка передаётся родителю, этот отступ определяет место, где может начаться родитель.
                                                                  Многое тут от типографии, это может казаться страшным вуду, но это так.
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                  • 0
                                                                    Специально для вас придумали тег
                                                                    
                                                                    А в целом, отличная статья, уяснил для себя пару моментов, спасибо
                                                                  • +2
                                                                    Всё это выглядит полной дичью (сам механизм конечно, а не статья). Как такая простая вещь (это же отступ, обычный отступ!) может быть такой абсурдно сложной? И с div'ами такие сложности на каждом шагу. Иногда мне кажется, что верстальщики специально держатся за div'ы, чтобы быть незаменимыми, потому что это вероятно самый запутаный способ разметки в мире.
                                                                    • +4
                                                                      Конечно, именно для этого, сначала придумали таблицы, потом когда все научились верстать на таблицах прилюдно плюемся, и молимся на дивы. Представьте мы уже анимацию научились делать — все для того, чтобы быть незаменимыми.
                                                                      • –4
                                                                        Просто я не верю в то, что div'ы — это удобный способ разметки. Возможно он таковым задумывался, но в результате получилось чудовище с кучей всяких скрытых зависимостей, нюансов и обходных маневров, необходимых для самых простейших действий. Больше всего это напоминает кривую программу с миллионом багов, каждый из которых надо досконально изучить, прежде чем получится что-то сделать.
                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                          • 0
                                                                            Это не мессия, это предвестник апокалипсиса…
                                                                            Поймете через пол года после реализации данного куска будущей спецификации.

                                                                            Попробуйте сделать адаптивную разметку с этим драфтом.

                                                                          • +1
                                                                            Осильте уже книгу во CSS, главу про компоновку таблиц, много вас открытий чудных ждёт про действительно скрытые зависимости и нюансы.

                                                                            А по вопросам веры в церковь.
                                                                            • 0
                                                                              Как то меня попросили поправить верстку на сайте. Когда я открыл шаблон, увидел десяток вложенных друг в друга таблиц. Поиск по показал, что их в тексте до тысячи.

                                                                              Сел и сверстал все на дивах, их получилось несколько десятков, и все понятно и просто.

                                                                              На одной странице сайта использовались таблицы для вывода какой-то статистики. Их я оставил как было изначально. Там они использовались по назначению.
                                                                              • 0
                                                                                поиск по td показал… тег скушало
                                                                                • –1
                                                                                  Возможно первый верстальщик просто плохо сверстал, а Вы хорошо. Потому что я, в свою очередь, тоже часто вижу верстку в которой миллионы дивов вложены друг в друга и ничего не понятно.

                                                                                  Я, вообще, то сам по себе не верстальщик, хотя и знаком с версткой не понаслышке. Сейчас я делаю Flex приложения и там для верстки используется язык MXML, который в миллион раз проще, понятнее и сверстать можно всё что угодно в любых вариантах. После этого на div'ы смотришь с недоумением.
                                                                                  • +1
                                                                                    Ну мне сложно судить о MXML, я его не знаю. Чтобы я мог оценить миллионную простоту, покажите, например, как будет в нем выглядеть что-то подобное:

                                                                                    • –3
                                                                                      Лень открывать редактор. Примерно будет так:

                                                                                      Повторяющиеся стили можно вынести в CSS и использовать вместо них styleName = «someStyle»
                                                                                      • –1
                                                                                        Вероятно мне не хватает кармы чтобы использовать теги. Тогда вот ссылка: pastebin.com/7nDLEDpJ
                                                                                        • +3
                                                                                          Не вижу особой простоты, возьмем те же дивы и css (замечу, что так-же задан размер шрифтов и тень). Разве в миллион раз сложнее MXML?

                                                                                          <style>
                                                                                          	div { 
                                                                                          		height:200px;
                                                                                          		width: 200px;
                                                                                          		position: absolute;
                                                                                          		background: rgba(0,0,0,0.3);
                                                                                          		font: 15px Arial;
                                                                                          	}
                                                                                          
                                                                                          	.a {top: 7px; left: 135px;}
                                                                                          	.b {top: 47px; left: 13px;}
                                                                                          	.c {top: 104px; left: 188px;}
                                                                                          
                                                                                          	.zashibis {
                                                                                          		background: transparent; 
                                                                                          		color: yellow;			 
                                                                                          		font: bold 40px Arial;
                                                                                          		top: 148px;
                                                                                          		left: 90px;
                                                                                          		text-shadow: 5px 5px 20px rgba(0,0,0,0.9);
                                                                                          	}
                                                                                          </style>
                                                                                          
                                                                                          <div class="a">Проверка</div>
                                                                                          <div class="b">Проверка</div>
                                                                                          <div class="c">Проверка</div>
                                                                                          <div class="zashibis">Зашибись</div>
                                                                                          
                                                                                          • 0
                                                                                            Заранее извиняюсь за код, я не верстальщик, немного знаю css, так-как приходится с верстальщиком взаимодействовать.
                                                                                            • –2
                                                                                              Вероятно это простой пример. Но суть в том, что у меня никогда не возникает вопроса, как что-то сверстать в MXML, при том, что на обучение достаточно пары дней.
                                                                                              • +1
                                                                                                Когда мне нужно было срочно сверстать страницу, я выучил все, что мне требовалось за три часа. Хотя css не мой профиль, я занимаюсь серверными скриптами.

                                                                                                В общем я так и не увидел ваших доводов к тому, что дивы — «чудовище с кучей всяких скрытых зависимостей, нюансов и обходных маневров, необходимых для самых простейших действий».

                                                                                                И «MXML, который в миллион раз проще».

                                                                                                Просто вы не разобрались в вопросе, и ваши утверждения голословны.
                                                                                            • 0
                                                                                              Вы оба неправы (: Во флексе есть тот же самый CSS и можно сделать один в один такой же код, только у вас будет BorderContainer вместо div. Штука флекса не в этом.

                                                                                              Штука флекса в том, что он сделан для разработки UI и наследует все хорошие практики из мира UI дева. Все блоки связаны между собой (ну кроме выноса с помощью абсолюта, естественно) и если вы любому блоку даёте высоту в процентах, то результат ВСЕГДА будет одинаковый — высота будет просчитана от высоты родителя. И не важно указывали мы родителю высоту, флоатится он или ещё что. Те же марджины всегда означают однозначную границу вокруг элемента. Они не схлопываются «рандомом» (как в HTML+CSS, в каких-то случаях складываются, в каких-то нет) — у них всегда одно поведение (если силой не поменять).

                                                                                              Если нам надо сделать двух-колоночную вёрстку так, чтобы обе колонки занимали всю высоту родителя, то в HTML только таблица, во флексе — никаких бубнов.
                                                                                              • +1
                                                                                                > Если нам надо сделать двух-колоночную вёрстку так, чтобы обе колонки занимали всю высоту родителя, то в HTML только таблица, во флексе — никаких бубнов.

                                                                                                Да хоть четыреx-колоночную:

                                                                                                <style>
                                                                                                .a, .b, .c, .d {
                                                                                                	height:100%;
                                                                                                	display: inline-block;
                                                                                                }
                                                                                                .a {background: #7CAFE7; width: 5%;}
                                                                                                .b {background: #E7897C; width: 10%;}
                                                                                                .c {background: #ABE77C; width: 20%;}
                                                                                                .d {background: #D37CE7; width: 40%;}
                                                                                                .parent {height: 800px;}
                                                                                                </style>
                                                                                                
                                                                                                <div class="parent">
                                                                                                	<div class="a"></div>
                                                                                                	<div class="b"></div>
                                                                                                </div>
                                                                                                
                                                                                                • 0
                                                                                                  Забыл добавить в parent:

                                                                                                  <div class="c"></div>
                                                                                                  <div class="d"></div>
                                                                                                  
                                                                                                  • 0
                                                                                                    Кстати, любителям старины (ie 5+ и фф2) нужно добавить две строчки:

                                                                                                    .a, .b, .c, .d {
                                                                                                    	float:left;
                                                                                                    	display:-moz-inline-box;
                                                                                                    	...
                                                                                                    
                                                                                                    • 0
                                                                                                      Высота парента неизвестна и динамическая. Только табле-целлы и экспрешшены для IE. Это называется — костыли. Попробуйте сверстать какой-нибудь привычный для софта UI, например, UI Mozilla Thunderbird. Со всеми табами с авторесайзом и скроллингом и т.д.

                                                                                                      Штука в том, что веб у нас контенто-ориентированный. Он наследует типографические традиции. Для UI он не предназначен в традиционном смысле. Вот верстать печать в Flex — это самоубийство (: А в HTML как нефиг делать.

                                                                                                      Разные инструменты для разных задач.
                                                                                                      • 0
                                                                                                        Ну это пример, я на самом деле не представляю, где физически в вёрстке нужны колонки одинаковой высоты. Кроме как в таблицах, ну это, понятно, таблицами и решается.

                                                                                                        Если же нужно визуально сделать одинаковыми, то ставим на бекграунд парента картинку-разделитель с repeat-y и пусть в реальности колонки будут разными — этого же никто не увидит.

                                                                                                        Проблема, имхо, надумана.
                                                                                                        • 0
                                                                                                          Почему надумана? Я же говорю — сверстайте любое десктопное приложение для разминки.
                                                                                                          • 0
                                                                                                            Я представляю, что это такое. Просто для разных вещей разные инструменты. Если в десктопной вёрстке высота чаще всего ограничена высотой окна, то для веб это не нужно.
                                                                                                    • 0
                                                                                                      Ну зачем таблицы, задача уже давно решена, при том кроссбраузерно.
                                                                                                  • 0
                                                                                                    Не убедительно. На div'ах всё ТОЧНО так-же, отличаться будут только названия тегов и атрибутов. И тоже стили можно (а лучше нужно) описать классами и вынести в filename.css.
                                                                                                    
                                                                                                    <div style="position: absolute; width: 200px; height: 200px; left: 0; top: 20px; background: #000; opacity: 0.3; z-index: по вкусу;">
                                                                                                    <label>Проверка</label>
                                                                                                    </div>
                                                                                                    ...
                                                                                                    
                                                                                        • 0
                                                                                          Просто вы не умеете их готовить ©
                                                                                    • +2
                                                                                      А разве не логично использовать текстовых блоков отступы в виде em?
                                                                                      • +5
                                                                                        Я все же не понимаю, почему вертикальный margin зависит от ширины родителя, а не от его высоты. Даже подумать о таком не мог, пока не прочитал в статье. Проверил — так и есть. Тут почитал, но все равно не понимаю.
                                                                                        • +3
                                                                                          потому что по задумке в3ц у правильных блоков нет жёсткой высоты — она вычисляется на основе ширины и содержимого. а раз нет высоты, то и вычислять относительно неё никак. поэтому margin-top:30% можно интерпретировать как угодно. решили интерпретировать так, чтобы одинаковые отступы (30%, 1em, 10px) для вертикальных полей и горизонтальных давали одинаковые результаты. так получается опрятней при резиновом вертикальном размере. я бы сделал по аналогии с height:30% — если у родителя вертикальный размер определён, то считается относительно него, если нет — включаем нашу магию.
                                                                                        • +2
                                                                                          а я в своё время изучение css начал со спецификаций 2.1 и с тех пор мне странно смотреть всякие «уроки для чайников». Официальные спецификации и понятнее же и обо всём же сразу. www.w3.org/TR/CSS21/
                                                                                          • 0
                                                                                            Вот-вот, и я о томже. В конце-то концов, CSS — язык разметки, а не программирования, и ничего сложного в нем нет. Давайте еще статьи про HTML писать. Например:«Для чего нужны теги Head и Body».
                                                                                            • 0
                                                                                              А где на русском?
                                                                                              • 0
                                                                                                CSS — каскадные таблицы стилей. Подробное руководство. 3-е издание Мейер Э. 2008

                                                                                                Можно я не буду гуглить за вас?

                                                                                                На выходных дочитал именно её. Отменно, если сделать скидку на то, что 3 года прошло и некоторые вещи изменились.
                                                                                                • +1
                                                                                                  Я просил спецификацию, а не руководство.
                                                                                            • +2
                                                                                              «Внешний отступ» — почему-то нормально переводят в книгах тех же. Или я не прав?
                                                                                              • +1
                                                                                                Боже как все-таки как можно усложнить такие простые вещи, в верстке даже нельзя одной строчкой див по центру поставить и приходится городить огород, может появится когда-нибудь…
                                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                  • 0
                                                                                                    " в верстке даже нельзя ОДНОЙ строчкой див по центру поставить". Я особенно в верстку не углублялся, но если есть float: left (right) почему нет center. И кстати, я имел ввиду по ширине, вот к примеру статья на эту тему, многие вещи в css можно упростить. Не пойму, почему за выражение личного мнения нужно обязательно минусовать карму.
                                                                                                    • 0
                                                                                                      margin: 0 auto;
                                                                                                      • 0
                                                                                                        В данном случае даже 0 не надо указывать. Просто margin: auto;
                                                                                                        • 0
                                                                                                          Я так понял, что нужно центрировать по горизонтали
                                                                                                          • 0
                                                                                                            Он и будет центрировать по горизонтали, если не указан position, где margin-top/bottom считает как top/bottom. Но тогда в данном случае 0 и есть то, что по дефолту, т.е. auto.
                                                                                                        • 0
                                                                                                          для этого надо указать ширину. а если она зависит от конента, то опаньки.
                                                                                                        • +1
                                                                                                          Я тоже всегда удивлялся. Если есть float: left (right) почему нет float: сверстать сайт как мне хочется;. Это было бы универсальным решением.
                                                                                                          • 0
                                                                                                            Спасибо за margin: auto раньше как-то пропускал этот момент, попадались методы выравнивания типа
                                                                                                            #CenterBlock{
                                                                                                                    width:400px;
                                                                                                                    height:400px;
                                                                                                                    position:absolute;
                                                                                                                    top:50%;
                                                                                                                    left:50%;
                                                                                                                    margin:-200px 0 0 -200px;
                                                                                                                }
                                                                                                            
                                                                                                            • 0
                                                                                                              обычно этот метод используется для выравнивание по центру не только по горизонтали, но и по вертикали. И наверное самый простой
                                                                                                            • +1
                                                                                                              float: зафигачить;
                                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                          • 0
                                                                                                            Только не надо этот страшный ужас показывать людям :)
                                                                                                            • 0
                                                                                                              Это же еще не стандарт.
                                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                              • 0
                                                                                                                jsfiddle.net/punk_undead/YZuhm/light/
                                                                                                                Типа такого?

                                                                                                                Отлично можно.

                                                                                                                Надо понимать, что потомок влияет на высоту родителя, поэтому перестроения высоты некоторым образом ограничены для того, чтобы ускорить компоновку и избежать ошибок и неоднозначностей.
                                                                                                              • 0
                                                                                                                Не вижу картинок в статье.
                                                                                                                • +1
                                                                                                                  Странно, что вам удалось опубликовать этот топик: ведь в заголовке вопиющая ошибка, которую, казалось бы, вы не должны были допустить, если прошли предварительный хабраquiz. ;-)

                                                                                                                  И таки-да, если уж калькировать слово margin на русский, правильнее будет «марджин». Я понимаю, что в русском языке есть слово «маргинал», но вот чтобы говорили «маргин» я, признаться, ни разу не слышал.
                                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                    • 0
                                                                                                                      Разумеется, инсталлирую. Кроме того, «инсталляция» — это вполне себе легитимное слово русского языка (хоть и заимствованное), имеющее отношение не только к IT. Впрочем, думаю, это вам известно.
                                                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                        • 0
                                                                                                                          Вообще я не совсем верно выразился: вместо «кальки» в данном случае правильнее говорить о «транслитерации». Позволю себе короткую цитату из Википедии: «в технике перевода кальку следует отличать от морфологической передачи, когда иноязычное слово транслитерируется с последующим приспособлением его к морфологии родного языка», хотя сейчас мне кажется, что с этой точки зрения оба варианта одинаково неудачны.

                                                                                                                          В то же время я согласен, что вводить названия типа «НЖМД» или общие типа «поле» при наличии устоявшегося жаргона в предметной области вовсе не лучше, чем пытаться «выдумать» подходящий термин, который бы был сразу понятен и при этом «звучал».
                                                                                                                  • +3
                                                                                                                    [offtopic]Хаброкомьюнити как обычно больше интересуется правильным написанием слов, чем содержанием. Кажется это сайт лингвистов, а не айтишников.[/offtopic]

                                                                                                                    По сути: автор молодец, доходчиво всё описал. Не смотря на наличие стандартов, верстка сегодня остается «шаманством». Такие статьи немного облегчают жизнь. Спасибо!
                                                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                      • +1
                                                                                                                        Если бы ещё разработчики браузеров её читали…
                                                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                          • 0
                                                                                                                            Вы конечно разбираетесь в вопросе, поэтому я не верю в искренность ваших слов. Держу пари, на вашем рабочем месте приклеено 120 бумажек с «популярными исключениями из правил».
                                                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                        • +1
                                                                                                                          Всем спасибо за отзывы!
                                                                                                                          Я так понял, что продолжение писать стоит?
                                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                          • +2
                                                                                                                            Не говоря уже об очень странном русском языке, Вы допустили две ошибки.

                                                                                                                            Во-первых, кто Вам сказал, что «Px, em, ex, % — относительные единицы»? 1 px = 1/96 in, это абсолютная единица.

                                                                                                                            Во-вторых, ex — это не em пополам, а x-высота шрифта, зависящая, соответственно, не от браузера, а от шрифта.
                                                                                                                            • 0
                                                                                                                              Я сейчас пишу статью на эту тему. Через час можно будет обсудить этот вопрос в отдельном топике
                                                                                                                              • +1
                                                                                                                                Подключите телевизор и вытащите на него браузер, пиксели внезапно станут втрое больше.

                                                                                                                                А во-вторых, иногда это именно em пополам, вычислять истинную высоту x для каждого шрифта не все умеют.
                                                                                                                              • 0
                                                                                                                                Вы только еще забыли упомянуть об одной «мелочи»: в ИЕ7, ИЕ6 (и ИЕ5.5. подозреваю тоже) сложение вертикальных маргинов у идущих друг за другом и вложенных элементов не подчиняется правилам CSS, а зависит от наличия layout. Более того, в некоторых ситуациях margin может складываться вопреки всем правилам даже с padding родительского элемента: www.brunildo.org/test/IEMarginCollapseLayout.html

                                                                                                                                Поэтому прежде чем радостно бежать применять эти трюки на своем сайте, стоит сначала проверить.а как это будет работать в самом веселом браузере. Это конечно не по стандартам, увы, но учитывать надо, так как эти баги никогда не будут исправлены.

                                                                                                                                • 0
                                                                                                                                  особенности ИЕ будут описанны в следующей части
                                                                                                                                  • 0
                                                                                                                                    В ИЕ7 указывайте, а остальные уже умерли.

                                                                                                                                    • 0
                                                                                                                                      Ай!
                                                                                                                                      DOCTYPE указывайте само собой, без него не тот режим включен по умолчанию.
                                                                                                                                      • +1
                                                                                                                                        да доктайп буду указывать
                                                                                                                                        и ИЕ6 тоже описывать
                                                                                                                                  • +2
                                                                                                                                    У вас пробелы не с той стороны скобок.
                                                                                                                                    • +1
                                                                                                                                      Я вот тоже не пойму, как можно, рассуждая о грамотной верстке, за целый день не найти несколько секунд и не исправить этот вырвиглазный заголовок.
                                                                                                                                      • +1
                                                                                                                                        Не только заголовок, везде в тексте так же.
                                                                                                                                        • 0
                                                                                                                                          Ой, и правда. Как же, интересно, автор прошел хабратест на правильное оформление топика? Там же, кажется, специальный пункт есть насчет скобок и пробелов.
                                                                                                                                    • +2
                                                                                                                                      Он использовал паддинг вместо уместного марджина. И этот человек нам лекции читает? :)
                                                                                                                                    • 0
                                                                                                                                      Все что касается единиц измерения, я описал в новой статье
                                                                                                                                      • 0
                                                                                                                                        Если маргины одноименные( оба маргина или отрицательное или положительное число ), то в таком случае берется большое число по модулю, а меньшее не учитывается.

                                                                                                                                        обновился у меня сегодня фаерфокс до пятерочки, а в нем… в нем это правило уже не действует %)
                                                                                                                                        то есть он теперь не берет по модулю, а тупо складывает =(
                                                                                                                                        кто-нибудь уже столкнулся с этим?

                                                                                                                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.