Igor Schnaider

О боже, отказываться от таблиц, чтобы потом плодить сущности вида div.tr и div.td. Если табличное представление данных - так и используйте таблицы, нефиг страдать. Ну или flexbox на худой конец, если старые браузеры уже в топке.

Например, такой случай http://codepen.io/anon/pen/MaPBLm?editors=110 Если убрать у body правило position: relative, тогда абсолютно позиционированный блок будет исходить из размеров вьюпорта. Даже если ему (тому, который абсолютно спозиционирован) height: 100% явно задать (вот тут я еще не понял, почему так происходит).

Нет. Вот здесь как раз все правильно. Это к вопросу про коллапс марджинов. Суть в том, что если у родителя стоят padding или border (не none), тогда поле не будет выходить за родителя. В моем примере как раз есть второй элемент (wrapper который). Я его специально создал, потому что он как раз ведет себя как надо. А body, как мне казалось, нет. Если у .wrapper убрать overflow, то видно, что заголовок вверх поднимется, а поля просто выйдут за границы. Просто в случае с body элемент на самом верху, поэтому создается такой эффект. Фактически заголовок съезжает вниз, но при этом сам body возвращается на освободившееся место. http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Не, вопрос про другое был, не про margin collapsing. У меня путаница была именно из-за фона. Думал, раз фон до верха доходит, значит там и есть верх body. Потому что фон в margin не попадает. А оказалось, что по спецификации корневой элемент должен копировать свойство background элемента body. Поэтому не увидел этого отступа. p.s. если :root { background: #fff; }, видно будет :-)

Неправда. body ушел ниже от отступа h1. Точно. Только почему тогда фон до самого верхнего края вьюпорта? Должен же, по идее, тоже чуть ниже начинаться. Ага, вот оно: http://www.w3.org/TR/CSS2/colors.html#background Оказалось, это html подкрасился тоже. Вот это я не знал. Теперь все встало на свои места. Спасибо за комментарии.

Неправда. body ушел ниже от отступа h1. Точно. Только почему тогда фон до самого верхнего края вьюпорта? Должен же, по идее, тоже чуть ниже начинаться.

Вопрос не в этом. Почему так происходит? Сам body начинается с верхнего левого края. Значит position: absolute + top: 0 должен тоже примыкать элемент к верху.

http://codepen.io/anon/pen/LpgeVq?editors=110 Проблема в следующем. Первый абсолютно спозиционированный относительно body элемент располагается чуть ниже верха страницы. (Должен примыкать прямо к верху: top: 0 стоит.) Почему верхнее поле заголовка (body > h1) так влияет на него именно в body? Но этого не происходит в простом wrapper'е.

В общем, сам уже разобрался :-) (Не знаю, как тут удалить вопрос.) У первой иконки нет параметров width и height, поэтому она занимает весь контейнер (100%).

http://codepen.io/anon/pen/Nqadoo В примере обе иконки – это SVG data-uri. Первая иконка ведет себя так, как если бы ей было заданы следующие свойства: background-repeat: no-repeat; background-size: contain; background-position: bottom; Вторая ведет себя так, как и должна, т. е. обрезается, если размер не влезает. Подскажите, в чем здесь дело?