html，宽度100％和填充

Question

I have a problem with margins. I want to have image inside div element. Height should be of the image, but width should be of the parent div minus padding.

 <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> 

and styles

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

 .inner img {
       width: 100%;
  } 

and the problem is easy to see on the image.

http://i59.tinypic.com/zn6mc2.png I want to have 10 pixels of white place around each side of the image

Answer 1

Remove width:100% from the inner class. Update your CSS like below.

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

DEMO

Answer 2

Remove the width:100%; for inner class

.inner {

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

DEMO

Answer 3

I would use another div to wrap the image and give:

padding:10px; 

insteed of margin.

here is a demo: http://jsfiddle.net/f6jju2mn/