2

Considere o seguinte código html: http://jsfiddle.net/qt7dsx7b/

No fiddle foi definida uma div com uma imagem localizada no canto superior direito. Ocorre que eu gostaria de adicionar uma margem entre a imagem e a borda da div (simulando um padding de 10px na div). Tentei colocar padding na div, mas a imagem de fundo não se mexe. Também poderia colocar um background-position: rigth 95%, mas nesse caso eu precisaria saber de antemão o tamanho da div e o tamanho da imagem, e ambas as informações eu não possuo. A única informação conhecida é o espaço de 10px entre a imagem e a borda.

1
  • 2
    Excelente pergunta. Esse é um dos efeitos de coisa criada por comitê (CSS, por exemplo). Os caras enchem de detalhe que não precisa na especificação, mas não pensam nas coisas óbvias necessárias no dia-a-dia.
    – Largato
    27/09/2014 às 20:36

1 Resposta 1

3

Não é bem o que você está pedindo, pois o CSS é muito limitado nesse aspecto, mas se você tiver controle sobre o padding do elemento, e ele for o mesmo do conteúdo da <div>, uma possibilidade é usar o background-origin para acrescentar o valor do padding como margem:

div.box{
    padding:10px;
    background-image: url(/minha/imagem.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-origin: content-box;
}

Suporte: IE9+ (IE8 dependendo do uso), Opera 10.5+, Firefox 4+, Webkit (com prefixo), Konkeror (com prefixo). Em Mobile não sei dizer a compatibilidade.

Veja aplicado ao seu JS Fiddle.

2
  • Interessante essa propriedade background-origin. É uma boa saída para o meu problema.
    – Savrige
    27/09/2014 às 21:02
  • 1
    @Borachio só tem que ver se o padding vai ser compatível com o conteúdo da DIV. Tem várias outras soluções, mas sem conhecer o caso real em que será aplicado, corro o risco de propor coisa incompatível. Se o padding servir, é a solução mais limpa das que eu vi. Lembrando que vc pode aplicar 2 fundos diferentes ou mais nos browsers recentes, e dá pra especificar separado o comportamento de cada um (um deles pegando o retangulo todo, o outro com margem). Basta separar por virgula.
    – Largato
    27/09/2014 às 21:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .