How to remove whitespace while using iframes side by side in HTML5

Question

How to remove the whitespace from two frames placed side by side?

I tried:

html,
body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  width: 100%;
  height: 100%;
}

iframe {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height: 100%;
}

<iframe name="l" src="l.htm" style="width:10%;" scrolling="no"></iframe>
<iframe name="c" src="c.htm" style="width:75%;" scrolling="no"></iframe>
<iframe name="r" src="r.htm" style="width:15%;" scrolling="no"></iframe>

I also looked at this answer, but it is saying that by using display property as display: block there will be no whitespace. But if I use that property my frames will be below each other not side by side. And I want my frames side by side as 10%, 75%, 15%.

score 2 · Accepted Answer · answered Nov 29 '17 at 09:06

Whitespace in HTML source code is significant.

Compare these two paragraphs:

<p>
a
b
c
</p>
<p>abc</p>

Remove the whitespace between the inline items in the source code to remove it from the rendered display.

html,
body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  width: 100%;
  height: 100%;
}

iframe {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height: 100%;
}

<iframe name="l" src="l.htm" style="width:10%;" scrolling="no"></iframe><iframe name="c" src="c.htm" style="width:75%;" scrolling="no"></iframe><iframe name="r" src="r.htm" style="width:15%;" scrolling="no"></iframe>

How to remove whitespace while using iframes side by side in HTML5

1 Answers1