I added a padding to the DIV: 15px. As a result, its border was misaligned_html/css_WEB-ITnose

I want the content in the DIV to be closer to the inside (not close to the edge), but after using padding, the DIV border overflows.

        .PhotoP        {            width:100%; height:160px; border-bottom:1px dashed gray; padding:15px;        }        <div style=" width:970px; height:400px;">              <div class="PhotoP">                   sdadas              </div>        </div>

Reply to discussion (solution)

See the bottom right corner of the screenshot. . .
The right side of the bottom dotted line overflows a little. Please solve it.

Remove width:100%.

It is better to use the margin of the outer div.

width: 100% removed
Why is it ok to remove 100%? It's really good
But I don't understand why if I don't add width100% to the DIV, the width of the dotted line under the DIV is still 100% width

width: 100% removed
Why is it okay to remove 100% ? It's really good
But I don't understand that if I don't add width100% to the DIV, the width of the dotted line under the DIV is still 100% width

This should have something to do with the box model~

width :100% removal
Why is it ok to remove 100%? It's really good
But I don't understand that if I don't add width100% to the DIV, the width of the dotted line under the DIV is still 100% width

The div tag itself is a block element and will occupy its own line, so you don't write The width will be displayed according to the width of the outer container~