CSS - Relleno de desbordamiento Mesa de exposición su recipiente

Question

Ejemplo: http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php

¿Por qué es que el div mesa es salir de su contenedor cada vez que agregar relleno?

¿Hay algún problema para este problema?

<style> 
.foroContainer { 
    width: 700px; 
    margin-left: auto; 
    margin-right: auto; 
    background: yellow; 
} 

.foroContainer .table{ 
    display: table; 
    width: 100%; 
    padding: 8px; 
    border: 1px solid #a9a9a9; 
    margin-bottom: 1em; 
} 

.foroContainer .row{ 
    display: table-row; 
} 

.foroContainer .cell{ 
    display: table-cell; 
} 

#right.cell{ 
    text-align: right; 
    border-top: 1px solid #a9a9a9; 
} 
} 
</style> 

<div class="foroContainer"> 
<div class="table"> 
    <div class="row"> 
     <div class="cell">asdasdasdas</div> 
    </div> 
    <div class="row"> 
     <div id="right" class="cell">asdasdas | asdasdsad | asdasdasdas</div> 
    </div> 
</div> 

Answer 1

La jerarquía de encapsulación en CSS es: margen - frontera - el relleno de

Al agregar el relleno a un objeto que prácticamente se altera su anchura. Si algo tiene 100px de ancho y agrega relleno: 10px su ancho será 120px (100 + 10 relleno-izquierdo + 10 relleno derecho)

Esta es la razón por la que su contenedor es empujado (su ancho: 100%) una buena manera sería otro contenedor interno de su tabla con ancho: 100% pero la tabla sin ancho.

Answer 2

Como alternativa, puede intentar modificar la propiedad de tamaño de caja, ya sea para cada elemento de la página, o simplemente ese contenedor. P.ej. para cada elemento de la página, usted escribiría:

* { box-sizing: border-box; } 

Esto alterará el modelo de caja por defecto que el navegador utiliza de manera que la anchura del elemento no se cambia, relleno o no.