边界外 DIV

Question

我在 CSS 中遇到属性填充或边框的问题。我在 div 中有一个非常适合的图像，但是添加边距超过了包含它的 div。

<div class="content">
    <div class="row" />
    <div class="ima">
        <h1>Titulo 1</h1>
        <img class="img" src="https://sites.google.com/site/cnetuc/imagen-04.jpg" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet mattis arcu eget euismod. Donec eget purus et enim cursus feugiat sit amet in diam.
            <p>
    </div>
    <div class="ima">
        <h1>Titulo 1</h1>
        <img class="img" src="https://sites.google.com/site/cnetuc/imagen-04.jpg" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet mattis arcu eget euismod. Donec eget purus et enim cursus feugiat sit amet in diam.
            <p>
    </div>
    <div class="ima">
        <h1>Titulo 1</h1>
        <img class="img" src="https://sites.google.com/site/cnetuc/imagen-04.jpg" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet mattis arcu eget euismod. Donec eget purus et enim cursus feugiat sit amet in diam.
            <p>
    </div>
</div>
</div>

附上fiddle

Answer 1

将 box-sizing: border-box; 添加到图像中。

.ima img{
  width:100%;
  border:10px solid rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

Answer 2

尝试

box-sizing: border-box;

或者

width: calc(100% - 20px);

边界外 DIV

Border out DIV (borde fuera de div)

html

css

margin

padding