Geek asks and answers

CSS - filling the display table overflows the container

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

Why does the div table go out of its container whenever I add padding?

Is there any work for this problem?

<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>
+5
source share
2 answers

Alternatively, you can try to change the box-sizing property, either for each element on the page, or for only one container. For instance. for each element on the page you should write:

* { box-sizing: border-box; }

This will change the default window model that the browser uses, so the width of the element does not change whether it is padded or not.

+5
source

CSS encapsulation hierarchy: margin - border - padding

, . - 100px , : 10px 120px (100 + 10 padding-left + 10 padding right)

, (: 100%), , : 100%, .

+3

More articles:


All Articles