Ankhena

никак, тень для всех сторон сразу задаётся. Но можете сверху наложить ещё одну тень

box-shadow: 0 5px 0 white, 0 0 5px rgba(0,0,0, 0.25);

Пример

Нужно четко в таком варианте определить размеры, четко определить шрифт и т. п. — чтобы не скакало. Ну и ограничить длину ввода в полях через JS.

UPDATE №1. Шрифт должен быть моноширинным.

UPDATE №2. Есть проблема из-за letter-spacing у последнего символа в input'е (появляется прокрутка). Хак с отрицательным margin на ширину letter-spacing тут не сработает. Я знаю только один вариант исправления этого — div как обертка и блок внутри с тем самым хаком и contenteditable. Т. е. нужно будет настраивать JS для получения данных отсюда. Вот тут это все есть + есть простой скрипт для ограничения вводимых в область символов, чтобы понять идею:

<h1>Заголовок</h1>
<p>Описание...</p>

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

Можно с помощью библиотеки Polymorph, но она малость глючная.

Проверяйте ваш CSS.

Таких проблем с простейшим свойством color никогда не было в Safari (и не только). Так что ищите проблему в CSS. Что-то переопределяет нужные вам свойства.

Скриншот результата работы вашего примера кода в iOS Safari. Закономерно — все в полном порядке:

tosster22,

Нужно padding оставить такой же, а при наведении добавить рамку которая в 10px

Подойдите к вопросу иначе. Рамка всегда есть, но ее не видно.
При наведении, рамка меняет цвет и ее видно.
Добавив transition: border-color 0.3s; сделаем смену цвета плавной.

a {
/*  padding: 20px; // Было */

  padding: 10px;
  border: 10px solid transparent;
}

a:hover {
  border-color: red;
}

Лучший вариант - сделать или скопировать как svg, и дать как бэкграунд на псевдоэлементы ::after и ::before

С помощью SVG

Так они в хроме и так нормально скрываются

те, что спрятались, доступны в меню.

Удобнее всего, псевдоэлемент after с градиентом. Тень не очень удобно, т.к. по бокам будет немного торчать.

Какую же хрень пишут в ответах, флексы, гриды... Вообще не к месту.
Не могу на это смотреть. Держите:

'clientOptions' => [
'allowedContent' => true
],

По довольно распространённому соглашению, все параметры после двойной черты считаются позиционными (чаще всего это имена файлов). git придерживается этого соглашения.

Например кто-то случайно создал файл с именем -n, а вы хотите вывести все файлы в папке командой cat

$ ls -l
total 8
-rw-rw-r-- 1 lynn lynn 6 Apr 19 12:34 file1
-rw-rw-r-- 1 lynn lynn 6 Apr 19 12:33 -n

если просто выполнить cat *, то получится странное:

 $ cat *
     1	file1

потому что bash раскрыл звёздочку и получилась команда can file1 -n, т.е. вывести файл file1 с нумерацией строк.
А вот так всё выведется правильно:

$ cat -- *
file1
a
b
c

Потому что раскроется в cat -- file1 -n, но по соглашению, после -- не может быть ключей команды, только имена файлов.

Конкретно в git есть ещё более строгое соглашение, по которому параметры после -- могут быть только путями.
Например если у вас есть файл test и ветка test, то будет так:

$ git branch 
* master
  test

$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   test

no changes added to commit (use "git add" and/or "git commit -a")

$ git reset test
fatal: ambiguous argument 'test': both revision and filename
Use '--' to separate paths from revisions, like this:
'git <command> [<revision>...] -- [<file>...]'

$ git reset -- test
Unstaged changes after reset:
M	test

Можно просто картинкой, а можно попробовать эту штуку:
https://github.com/anseki/leader-line