The theme certainly beaten, but remain neponyatki.
I am trying to impose a box div-s. The result here is a code:

& lt; html & gt;
& lt; Head & gt;
& Lt; script type = "text / javascript" src = "script.js" & gt; & lt; / script & gt;
& lt; style & gt;
  div # popup_container
  {
    width: 240px;
    height: 150px;
    left: 359px;
    top: 206px;
    background-color: # e2d5e9
  }
  div # popup_left
  {
    width: 9px;
    height: 150px;
    float: left;
    left: 3px
  }
  div # popup
  {
    float: left;
  }
  div # popup_right
  {
    width: 12px;
    height: 150px;
    Float: Right;
  }
  img # img_big
  {
    width: 200px;
    margin-left: 10px;
    margin-top: 10px;
    height: 130px;
  }
  .arrow
  {
    cursor: pointer;
    top: 50px;
  }
& lt; / style & gt;
& lt; / Head & gt;
& lt; Body & gt;
& Lt; div id = "popup_container" & gt;
  & Lt; div id = "popup_left" & gt; & lt; img src = "imgs / arrow_left.png" class = "arrow" & gt; & lt; / div & gt;
  & Lt; div id = "popup" & gt; & lt; img src = "" id = "img_big" & gt; & lt; / div & gt;
  & Lt; div id = "popup_right" & gt; & lt; img src = "imgs / arrow_right.png" class = "arrow" & gt; & lt; / div & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

The question is: why is the class of the object can not be in any way arrow indent, except margin? Some padding-top and top are set to auto, even if they are explicitly set. popup-left, too, can not be moved.

Answer 1, Authority 100%

All block elements are indented margin and padding. For example, here yellow background – a margin, and red – it’s padding. However, in the Layout view strict img can be rendered
like inline elements , this is often all img clearly define the property display: block;

In order to position elements relative to the current location using the properties of top , bottom , etc, you must set the property position: relative; for example, that would align the vertical elements with the class arrow ad, you can set the style:

. Arrow {
  Position: relative;
  Top: 50%;
  / * Height: 50px; * / / * Height positioned element * /
  margin-top: -25px; / * This value is equal to half the height of the element * /
}

http://cssdesk.com/2KR6S

Answer 2, Authority 50%

I do not really understand the question, but you can set a property in popup_left and popup_right

position: relative,

And arrow, Stalbo,

position: absolute

Well, the top will work.

Answer 3, Authority 50%

.arrow add position: relative;
And to add image padding -. A strange idea

Answer 4

The easiest way is to change the whole popup_conteiner.
In a hurry sketched example, you can push off from it – https://jsfiddle.net/ausooyy2/1/

That site is not cursed:

& lt; div id = "popup_container" & gt;
 & Lt; div id = "wrap" & gt;
  & Lt; div id = "popup_arrow" class = "left" & gt; & lt; / div & gt;
  & Lt; div id = "popup" & gt;
   & Lt; img src = "" id = "img_big" & gt;
  & lt; / div & gt;
  & Lt; div id = "popup_arrow" class = "right" & gt; & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt;

CSS:

div # popup_container {width: 240px; height: 150px; left: 359px; top: 206px; background-color: # e2d5e9;}
div # wrap {display: table; width: 100%; height: 100%;}
div # popup_arrow, div # popup {display: table-cell; vertical-align: middle;}
div # popup_arrow {width: 9px; cursor: pointer;}
div # popup {width: 200px;} 
div # popup_arrow {background-repeat: no-repeat; bacground-position: center; background-size: 8px;}
div # popup_arrow.left {background-image: url ("imgs / arrow_left.png");}
div # popup_arrow.right {background-image: url ("imgs / arrow_right.png");}
#img_big {display: block; width: 100%; height: 100%;}