title: two divs with display:inline-block - second div with iframe ad being pushed down a few pixels
body: <p>Background: working on a responsive redesign. normalize.css used for reset.
  DFP Ads inserted into div's using <a href="http://exisweb.net/how-to-use-google-adsense-on-a-responsive-website" rel="nofollow">this technique</a>. The ad container div's are hidden depending on window size and the ad iframe's are only inserted once into the non-hidden div. I also have a site logo div, .brand, that is hidden or not depending on width. Both the ad div container, .ta, and the logo container, .brand, are contained within a div called .secondnav. All three divs are 90 px tall. .brand, #ldr and .ta are all display:inline-block.</p>
  
  <p>When .brand is display:none, the iframe ad in #ldr div contained by .ta sits perfectly within the height of 90px.</p>
  
  <p>When the window is a bit bigger and .brand becomes display:inline-block, .ta suddenly gets pushed down about 4-5 pixels. They're still side by side but suddenly the ad is a few pixels lower.</p>
  
  <p>I can't see what could be pushing it down. I thought it could be how the div is interacting with the ad's iframe, but why is it only happening when it's next to another inline-block div?</p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>   .brand {
  width:200px;height:90px;
  background:#660000 url('/dh5.svg') no-repeat left top;
  display:inline-block
  }
  .multiplebgs .brand {
  width:200px;height:90px;
  background-color:#fff;
  background-image:url(/dh5.svg),url(/dhw.svg);
  background-position:0 0,30px 0;
  background-size:30px,170px;
  background-repeat:repeat-y,repeat-y;
  display:inline-block
  }
  .ta {
  height:90px;
  display:inline-block
  }
  .secondnav {
  height:90px;
  background:url('/fs.jpg') 0 0 repeat
  }
  #ldr {
  background:blue;
  width:728px;height:90px;
  display:inline-block
  }
  #mldr {
  background:yellow;
  width:320px;height:50px;
  display:inline-block
  }
  #smallban {
  background:green;
  width:468px;height:60px;
  display:inline-block
  }
  </code></pre>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;div class="secondnav"&gt;
  &lt;div class="brand"&gt;&lt;/div&gt;
  &lt;div class="ta"&gt;
  &lt;div id="ldr" class=
  "adslot hidden-phone hidden-tablet visible-desktop" data-dfp=
  "728x90"&gt;&lt;/div&gt;
  &lt;div id="mldr" class=
  "adslot hidden-desktop hidden-tablet visible-phone" data-dfp=
  "320x50"&gt;&lt;/div&gt;
  &lt;div id="smallban" class=
  "adslot visible-tablet hidden-phone hidden-desktop" data-dfp=
  "Smallbanner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Wasn't sure if I could include an URL to my test page so you could see this in action. Will edit it and include one if it's kosher. Will Google more on iframe alignment but thought I'd ask here. Thanks.</p>
  
  <p>My test is here: <a href="http://www.digitalhit.com/bptest/index.shtml" rel="nofollow">http://www.digitalhit.com/bptest/index.shtml</a> The issue appears at any size where there is an ad next to the .brand. e.g. at 480px, 600px, 1024px or higher. Please ignore the garish colours, just there for seeing the divs clearly as I test the design.</p>