Ignorar preenchimento pai

126

Estou tentando fazer com que minha regra horizontal ignore o preenchimento pai.

Aqui está um exemplo simples do que eu tenho:

#parent {
  padding:10px;
  width:100px;
}
hr {
  width:100px;
}

Você descobrirá que a regra horizontal se estende para fora do pai em 10px. Estou tentando fazer com que ele ignore o preenchimento de que tudo o mais na div pai precisa.

Estou ciente de que poderia fazer uma div separada para todo o resto; esta não é a solução que estou procurando.

html css

— Sam
fonte

160

Correção fácil, basta fazer

margin:-10px

na hora.

— Sam
fonte

9

Isso funciona, mas o problema é que não estenderá todo o comprimento da div pai. Isso ocorre porque o preenchimento NÃO está incluído na largura de 100px, isso significa que ele tem 120px de largura e você <hr>terá 20px do final da sua div. Veja este jsFiddle para o que quero dizer: jsfiddle.net/YVrWy/1

— Alastair Pitts

Sim, eu resolvi isso quando o adicionei; a largura é irrelevante.

— Sam

22

se você precisar de 100% de largura, use auto como atributo de largura. A largura será calculada com relação às margens especificadas.

— Schlingel

4

Você deve fazer algo como ... margin: 0 -15px; ..... caso contrário, a hora sugará verticalmente o conteúdo adjacente em sua direção.

— honkskillet

meio hackish. gostaria que houvesse uma maneira melhor

— Oldboy

29

Para fins de imagem, você pode fazer algo assim

img {
    width: calc(100% + 20px); // twice the value of the parent's padding
    margin-left: -10px; // -1 * parent's padding
}

— adriancho5692
fonte

8

Mas e se você não conhecer necessariamente o preenchimento dos pais?

1

Isso funcionou para mim quando uso largura mínima, em vez de apenas largura.

— Pedro Nadolny

@ user5707327 você sempre pode combinar estilos com javascript para obter o pai estofamento

— adriancho5692

uau, uso genial de larguras negativas!

— Mr PizzaGuy 25/06

9

Em geral, essa pergunta foi respondida, mas em pequenas partes por todos. Eu lidei com isso há apenas um minuto atrás.

Eu queria ter uma bandeja de botões na parte inferior de um painel em que o painel tivesse 30 pixels ao redor. A bandeja de botões precisava estar nivelada com a parte inferior e as laterais.

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}

Fiz uma demonstração aqui com mais detalhes para impulsionar a ideia. No entanto, os principais elementos acima são deslocados para qualquer preenchimento pai com margens negativas correspondentes no filho. Então, o mais crítico, se você deseja executar o filho em largura total, defina a largura como automático. (como mencionado em um comentário acima por schlingel ).

— Mitchell Geere
fonte

7

Meio atrasado, mas é preciso um pouco de matemática.

.content {
  margin-top: 50px;
  background: #777;
  padding: 30px;
  padding-bottom: 0;
  font-size: 11px;
  border: 1px dotted #222;
}

.bottom-content {
  background: #999;
  width: 100%; /* you need this for it to work */
  margin-left: -30px; /* will touch very left side */
  padding-right: 60px; /* will touch very right side */
}

<div class='content'>

  <p>A paragraph</p>
  <p>Another paragraph.</p>
  <p>No more content</p>


  <div class='bottom-content'>
      I want this div to ignore padding.
  </div>

Não tenho Windows, então não testei isso no IE.

violino: exemplo violino ..

— sqram
fonte

1

Você deve dividir o padding-right: 60px para padding-left: 30px; padding-right: 30px, para que o conteúdo não seja deslocado quando você usar text-align: center;

— Lucas

3

margin: 0 -10px;

é melhor que

margin: -10px;

O posterior suga o conteúdo verticalmente para ele.

— honkskillet
fonte

2

Seu pai tem 120px de largura - ou seja, 100 largura + 20 de preenchimento de cada lado, então você precisa fazer sua linha com 120px de largura. Aqui está o código. Na próxima vez, observe que o preenchimento aumenta a largura do elemento.

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}

— easwee
fonte

1

Com largura definida é fácil. O problema é quando você não sabe largura

— Guilherme Ferreira

@GuilhermeFerreira Use width: auto;in hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 Infelizmente, esta solução ainda requer conhecimento paddingdefinido pelos pais.

— Home

1

O problema pode ser o modelo de caixa que você está usando. Você está usando o IE?

Quando o IE está no modo quirks, widthé a largura externa da sua caixa, o que significa que o preenchimento estará dentro. Portanto, a área total deixada dentro da caixa é 100px - 2 * 10px = 80pxnesse caso sua largura de 100 px <hr>não parecerá correta.

Se você estiver no modo padrão, widthé a largura interna da sua caixa e o preenchimento é adicionado do lado de fora. Portanto, a largura total da caixa está 100px + 2 * 10px = 120pxdeixando exatamente 100 px dentro da caixa para o seu <hr>.

Para resolvê-lo, ajuste seus valores de CSS para o IE. (Verifique no Firefox para ver se parece ok). Ou melhor ainda, defina um tipo de documento para colocar o navegador no modo estrito - onde o IE também segue o modelo de caixa padrão.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...

http://www.quirksmode.org/css/quirksmode.html

— Martin Algesten
fonte

1

Se você possui um contêiner pai com preenchimento vertical e deseja que algo (por exemplo, uma imagem) dentro desse contêiner ignore seu preenchimento vertical, você pode definir uma margem negativa, mas igual, para 'top' e 'bottom':

margin-top: -100px;
margin-bottom: -100px;

O valor real não parece importar muito. Ainda não tentei isso em revestimentos horizontais.

— Marnix.hoh
fonte

0

easy fix .. adicione à div pai:

dimensionamento de caixa: caixa de borda;

— Jaclyn U
fonte

0

Aqui está outra maneira de fazer isso.

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

Aqui estão alguns exemplos sobre repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

— Dillon Burnett
fonte