CSS - Отступы при переполнении дисплея стола его контейнера

Question

Пример: http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php

Почему это таблица DIV выходит из контейнера, когда я добавить отступы?

Есть ли какая-нибудь работа для решения этой проблемы?

<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

Иерархия инкапсуляции в CSS является: Маржа - граница - обивка

При добавлении отступы к объекту вы практически изменить его ширину. Если что-то составляет 100 пикселей в ширину, и вы добавляете прокладку: ширина 10px станет 120px (100 + 10 padding-left + 10 padding right)

Это причина, по которой ваш контейнер переполнен (ширина: 100%) хорошим способом будет другой контейнер, внутренний для вашего стола, с шириной: 100%, но таблица без ширины.

Answer 2

В качестве альтернативы вы можете попробовать изменить свойство размера окна, либо для каждого элемента на странице, либо только для одного контейнера. Например. для каждого элемента на странице, можно было бы написать:

* { box-sizing: border-box; } 

Это изменит блочную модель по умолчанию, браузер использует так, что ширина элемента не изменяется, отступы или нет.