Question

我的边距有问题。我想在div元素中有图像。高度应该是图像，但宽度应该是父div减去填充。

 <div class="inner">
      <img width="100%" src="http://pawelek-moj-aniolek.blog.onet.pl/wp-content/blogs.dir/505303/files/blog_bg_734362_1406866_tr_morze.jpg" alt="There is no image"/>
 </div>

和样式

  .inner {
        width: 100%;
        height: 100%;
        margin: 10px;
        position: relative;
   }

 .inner img {
       width: 100%;
  }

问题很容易在图像上看到。

http://i59.tinypic.com/zn6mc2.png 我想在图像的每一边有10个像素的白色区域

Answer 1

从width:100%课程中删除inner。像下面一样更新你的CSS。

  .inner {
    height: 100%;
    margin: 10px;
    position: relative;
   }

DEMO

Answer 2

删除width:100%;类

的inner

.inner {

        height: 100%;
        padding: 10px;
        position: relative;
   }

DEMO

Answer 3

我会使用另一个div来包装图像并给出：

padding:10px;

保证保证金。

这是一个演示：http://jsfiddle.net/f6jju2mn/

html，宽度100％和填充

3 个答案: