Igor Schnaider

О боже, отказываться от таблиц, чтобы потом плодить сущности вида div.tr и div.td.

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

Я не разу не видел что бы к body применялся relative

Например, такой случай http://codepen.io/anon/pen/MaPBLm?editors=110

Если убрать у body правило position: relative, тогда абсолютно позиционированный блок будет исходить из размеров вьюпорта.

Даже если ему (тому, который абсолютно спозиционирован) height: 100% явно задать (вот тут я еще не понял, почему так происходит).

Хорошо все таки когда человек задает вопрос и не сидит ждет когда ему дадут код который можно скопировать и вставить, а ищет еще и сам)

Но тема действительно интересная, давайте обсуждать)

Например в IE11 все показывается как надо, без отступов.

Если поставить для body хотя бы 1px padding то опять же все работает в связке с overflow:hidden;. Получается это баг движка (IE или остальные?), или это недоработка самой спецификации? Что делает padding, что с помощью него все встает на свои места? 

Нет. Вот здесь как раз все правильно. Это к вопросу про коллапс марджинов.

Суть в том, что если у родителя стоят padding или border (не none), тогда поле не будет выходить за родителя.

В моем примере как раз есть второй элемент (wrapper который). Я его специально создал, потому что он как раз ведет себя как надо. А body, как мне казалось, нет. Если у .wrapper убрать overflow, то видно, что заголовок вверх поднимется, а поля просто выйдут за границы.

Просто в случае с body элемент на самом верху, поэтому создается такой эффект. Фактически заголовок съезжает вниз, но при этом сам body возвращается на освободившееся место.

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

 

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

Почитайте про схлопывание отступов (http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/). В вашем случае отступ первого h1 создал отступ в body. В результате абсолютно спозиционированный блок примкнул не к самому верху, а к границе этого отступа. Физически с body ничего не случилось. Во втором блоке, который .wrapper, отступ у h1 вывалился за пределы .wrapper, но внутренних отступов он не создал, поэтому абсолютно спозиционированный блок примкнул к самому верху. Надеюсь, понятно объяснил)

Не, вопрос про другое был, не про margin collapsing.

У меня путаница была именно из-за фона. Думал, раз фон до верха доходит, значит там и есть верх body. Потому что фон в margin не попадает. А оказалось, что по спецификации корневой элемент должен копировать свойство background элемента body. Поэтому не увидел этого отступа.

p.s. если :root { background: #fff; }, видно будет :-)

 

 

Сам body начинается с верхнего левого края

Неправда. body ушел ниже от отступа h1. 

 

Точно.

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

 

Ага, вот оно: http://www.w3.org/TR/CSS2/colors.html#background

Оказалось, это html подкрасился тоже. Вот это я не знал. Теперь все встало на свои места.

Спасибо за комментарии.

 

Сам body начинается с верхнего левого края

Неправда. body ушел ниже от отступа h1. 

 

Точно.

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

У тебя в body стоит position: relative;

Вопрос не в этом. Почему так происходит? Сам 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;

Вторая ведет себя так, как и должна, т. е. обрезается, если размер не влезает.

Подскажите, в чем здесь дело?