Dimensionamento de caixa CSS3: margem-caixa; Por que não?

Por que não temos box-sizing: margin-box;? Normalmente, quando colocamos box-sizing: border-box;em nossas folhas de estilo, realmente queremos dizer o primeiro.

Exemplo:

Digamos que eu tenha um layout de página de 2 colunas. Ambas as colunas têm uma largura de 50%, mas parecem feias porque não há sarjeta (lacuna no meio); Abaixo está o CSS:

.col2 {
    width: 50%;
    float: left;
}

Para aplicar uma calha, você pode pensar que podemos definir uma margem certa na primeira das 2 colunas; algo assim:

.col2:first-child {
    margin-right: 24px;
}

Mas isso faria a segunda coluna se agrupar em uma nova linha, porque o seguinte é verdadeiro:

50% + 50% + 24px > 100%

box-sizing: margin-box;resolveria esse problema incluindo margem na largura calculada do elemento. Eu consideraria isso muito útil se não mais útil que box-sizing: border-box;.

Você não poderia usar width: calc(50% - 24px);para seus cols? Em seguida, defina suas margens.

Eu acho que poderíamos ter um box-sizing: margin-box. O modelo de caixa de css mostra exatamente quais são as posições das margens dos quadros.

Existem problemas menores - por exemplo, as caixas de margem podem se sobrepor - mas não são difíceis de resolver.

Eu acho que a situação é a mesma, como podemos ver com as combinações overflow-x& overflow-y, com as divs posicionadas absolutas nas células da tabela, com a combinação de min | max-width | height com o tamanho da caixa e assim por diante.

Existem recursos, recursos realmente simples, que os desenvolvedores do navegador simplesmente não desenvolvem.

IMHO, box-sizing: margin-boxforam um recurso muito útil. Outro recurso útil foi o box-sizing: padding-box, ele existe pelo menos no padrão, mas não foi implementado em nenhum dos principais navegadores. Nem mesmo no mais novo cromo!

Nota: Comentário do @Oriol: o Firefox implementou o tamanho da caixa: caixa de preenchimento. Mas outros não, e foi removido das especificações. O Firefox irá removê-lo na versão 50. Triste.

O cara no topo está perguntando sobre como adicionar margem à largura geral, incluindo preenchimento e borda. O problema é que a margem é aplicada fora da caixa e o preenchimento e a borda não são, ao usar border-box.

Eu tentei alcançar a border-marginidéia. O que descobri é que, se estiver usando margem, você poderá adicionar uma classe .lastao último item (com margem, aplicar uma margem zero ou usar :last-child/:last-of-type). Ou adicione margens iguais a toda a volta (semelhante à versão de preenchimento acima).

Veja exemplos aqui: http://codepen.io/mofeenster/pen/Anidc

border-boxcalcula a largura do elemento + seu preenchimento + sua borda como a largura total. Portanto, se você tiver 2 divs com 50% de largura, eles serão adjacentes. Se você adicionar 8pxestofamento a eles, terá uma sarjeta 16px. Combine isso com um elemento de embalagem - que também possui preenchimento de 8px- você terá uma grade bem definida com calhas iguais a toda a volta.

Veja este exemplo aqui: http://codepen.io/mofeenster/pen/vGgje

O último é o meu método favorito.

Tenho certeza de que tudo isso é óbvio, mas vou digitar mesmo assim porque ... bem, preciso do exercício. O resultado a seguir não seria tão eficiente quanto box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizingé usado para controlar a partir de qual ponto o preenchimento e a borda são avaliados para o tamanho geral do elemento. Portanto, embora não seja mais conveniente incluir pxmargens com uma %largura (como geralmente é sempre o caso), é mais fácil calcular qual deve ser o valor percentual relativo, porque você não precisa incorporar preenchimento e bordas à largura definida.

Isso ocorre porque o atributo de dimensionamento de caixa se refere ao tamanho de um elemento após calcular os valores específicos da dimensão (preenchimento, bordas). "box-sizing: border-box" define a altura / largura de um elemento e leva em consideração o preenchimento e a largura da borda. O escopo da margem de um elemento é maior que o próprio elemento, o que significa que ele modifica o fluxo da página e de seus elementos circundantes, alterando diretamente a maneira como o elemento se ajusta ao seu pai em relação aos elementos irmãos. Por fim, um valor de atributo "caixa de margem" causaria grandes problemas e é essencialmente o mesmo que definir diretamente a altura / largura dos elementos.

No Codrops, existem alguns bons artigos sobre o efeito de margens e linhas forçadas a transbordar. Eles sugerem o uso da unidade rem ou em com um css do normalizador configurando o tamanho da fonte para 100% para todos os navegadores; quando você define larguras e margens, é fácil acompanhar o efeito na largura da linha, simplesmente anotando nos comentários para a largura total. Uma conversão de 16px para 1 em é a maneira de calcular o total de viewports direcionadas com o total.

Trabalhando assim para o estágio dev pelo menos e, se você quiser modelos 'responsivos', poderá converter larguras em%, incluindo as larguras de margem.

A outra maneira, e muitas vezes mais simples, que eles sugerem para lidar com as sarjetas é usar o pseudo after e o content: '';em cada uma das suas colunas que eu acho que funciona muito bem. Se você definir uma classe div que é a última coluna definida, como end, poderá direcionar essa classe para não ter o pseudo depois ou ter uma mais ampla; que melhor se adapte ao seu layout.

O bônus adicional de usar esse método de pseudo-elemento é que ele também fornece um alvo para sombras que podem dar mais efeito 3D e maior profundidade à imagem plana no monitor dos leitores. No momento, estou experimentando esse efeito aumentando os efeitos usados ​​nos botões, 'ajustando' os gradientes e o índice z.

As dimensões dos elementos não substituídos no nível do bloco no fluxo normal devem satisfazer

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = largura do bloco que contém

Quando excessivamente restrito, os navegadores devem ajustar a margem esquerda ou direita. Eu acho que isso significa que a largura da caixa de margem deve ser igual à largura do bloco que contém (ou seja, 100%).

Para o seu caso, bordas transparentes com box-sizing: border-boxpodem funcionar como margens .

Talvez defina a borda com 0% de opacidade usando RGBA e use a borda como uma margem.

Existe uma situação interessante ao usar o tamanho da caixa dentro do conteúdo do corpo

sem conteúdo sem caixa de borda não fornece nenhum valor na recontagem de margem esquerda-direita% desses algoritmos de recontagem de duas caixas

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

As versões do Firefox anteriores a 57 também suportavam o valor padding box para o tamanho da caixa, embora esse valor tenha sido removido da especificação e das versões posteriores do navegador.

Então, caixa de margem, mesmo não planejada ...