Igor Schnaider

Еще вариант.

flex-shrink: 0, не?

По поводу расположения написал же выше. Кажется понял, в чем у вас путаница. position: absolute делает элемент блочным в том смысле, что у него создается блочный контекст форматирования. Это не совсем одно и то же, что и display: block.

Блочными и становятся. Иначе ширина и высота были бы по содержимому, а не согласно установленным стилям.

Когда вы вынимаете элемент из потока и не указываете значения top, left и т. п., этот элемент будет находится там, где он был в потоке. В данном случае, как вы сами написали, у псевдоэлемента значение свойства display – inline-block, у кнопки текст по умолчанию идет по центру. Когда вынимаем из потока, верхний левый край элемента будет располагаться в этом центре. У display: block все наоборот: он сразу стоит там, где вам нужно. И когда вы вынимаете его из потока, его левый/верхний край будет там, где был изначально – влево вверху кнопки. Вот собрал пример, попробуйте.

Ну, тут гадать остается. Попробуйте расшарить свой проект, посмотреть что там. Или попробуйте повысить приоритет для проверки (независимо от местоположения ваших правил, у предыдущих может быть выше специфичность): :root:root:root button { /* :-) */ }

padding: 0; border: 0; должно быть достаточно. Возможно, их другие стили перебивают.

Она не съезжает, ей просто ширины не хватает.

На CSS можно.

user-select: none

Не понял вопрос тогда. В смысле, чтобы просто исчезла картинка на малом размере? Тогда media queries в помощь – display: none.

Даже статистика есть ? А вообще, у них семантика разная. (Раньше первые два были чисто стилистическими.)

overflow: hidden на общем для всей страницы контейнере добавьте. На body, например.

А что мешает воспользоваться готовыми HTML парсерами?

Имеется ввиду, что они могут существовать в любом контексте сами по себе (в одиночку), независимо от внешнего окружения. Ну как бы отдельная сущность. Плюс, может иметь свой заголовок, секции, футер. То есть как раз подходит для карточки товара.

$tablet-width: 'min-width: 750px'; .main-header { width: 100px; height: 100px; @media (#{$tablet-width}) {} }

Зачем canvas. Просто картинкой вставьте (я бы SVG использовал здесь). Кружки абсолютно спозиционируйте поверх.

https://jsfiddle.net/fvc8sL59/

А как надо?

Ну вообще-то они на базовой линии оба лежат.

Через инспектор размеры проверяйте, а не скриншотами. Либо масштабируйте пропорционально оригинал с результатом. p.s. На ретине, например, размеры будут в ×2 раза больше. Т. е. 100px в фотошопе станут 200px.

Читайте выше.

А зачем тут вообще форма, если вы ничего на сервер не отправляете? <iframe name="MyFrame1" src="1.html"></iframe> <input> <button>Open</button> const iframe = document.querySelector("iframe"), input = document.querySelector("input"), btn = document.querySelector("button"); btn.onclick = function() { const val = +input.value; // let the file names be between 1 to ∞ if (val && val > 0) { iframe.src = `${val}.html`; } };

Через box-shadow сделайте.

https://codepen.io/anon/pen/ZJrqBp