CSS: Сделайте изображение набивки не влияет на тень

Таким образом, у меня есть простой CSS, но большая проблема ...CSS: Сделайте изображение набивки не влияет на тень

.separator a img { 
    width: 100%; 
    height: auto; 
    padding: 12px; 
}

И результат: this

Как вы можете видеть на изображении, тень показывая на заполнении изображения, но я хочу, чтобы он отображался на изображении.

Я хочу сделать this, но и сохранить набивку.

Любые идеи?

источник

2016-08-19 Kibi Brat

Опубликовать [mcve] в своем ответе пожалуйста – j08691

** край ** есть * наружный * элемент, ** накладка ** есть * внутри * элемент. – Scott

Не используйте свойство padding в изображении, это вздор. Вместо этого используйте его в своем якорь-элементе, как в этом [** demo **] (https://jsfiddle.net/rickyruizm/35ffmszx/) – Ricky

Вы ищете margin CSS property. Заполнение происходит внутри рамки, а маржа выходит наружу.

Поскольку тень (я предполагаю) применяется через box-shadow, маржа будет вне ее, и тень отобразится непосредственно рядом с изображением.

Попробуйте изменить padding: 12px на margin: 12px.

источник

2016-08-19 00:35:10 rvighne

Я пробовал с краем, а тень на изображении, но изображение просматривается текст. –

@KibiBrat Это неожиданно, похоже, что другие стили на странице мешают. Было бы полезно, если бы вы разместили на свой вопрос [Минимальный, полный и проверенный пример] (http://stackoverflow.com/help/mcve), чтобы мы могли исследовать проблему дальше. – rvighne

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

Попробуйте использовать margin вместо padding. Подумайте, padding как «внутри» окна, а margin как пространство между полем и другими вещами на странице.

источник

2016-08-19 00:35:45

Не копируйте @rvighne :) –

Это комментарий. не ответ. –

@ KibiBrat Я не копировал, мы оба ответили в ту же минуту. –

CSS: Сделайте изображение набивки не влияет на тень

ответ

Смежные вопросы