0

I've got a Facebook iframe app, using fluid width.

I can't work out how to create space between this app and the outside top content, left margin and right content.

Currently, there is no space between my Facebook app and surrounding outside content.

Have tried various CSS padding and margin but these add spacing to the content inside the iframe app.

Here's relevant markup as requested (thanks).

HTML:

<!DOCTYPE HTML>
<html>
  <head>
    <!-- various FB metadata -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=0.5, user-scalable=yes" />

     <title>Slideshow</title>
  </head>

  <body
    <div id="slideshow">
    <!-- various html/jquery for slideshow -->
  </body>

CSS:

body {
  margin-top: 20px; padding-top: 20px; /* only works with content INSIDE the app */

  font-family: Verdana, sans-serif;
  background-size: cover;
  font-smoothing: antialiased;
  background: radial-gradient(ellipse at center,  #e5e5e5 0%,#5e8cba 100%); /* W3C */

  /* browser-specific elided */
}
4

1 に答える 1

2

A) body タグを > で閉じます

<body>

B) パディングは内側でのみ機能します。いつも。そして、そのコンテンツで余白が機能するとは思いません。外部に div を追加してみて、それにパディングを与えてください。

<!DOCTYPE HTML>
<html>
  <head>
<!-- various FB metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=0.5,                    user-scalable=yes" />

 <title>Slideshow</title>
 </head>

<body>
<div style="padding:5px">
<div id="slideshow">
<!-- various html/jquery for slideshow -->
</div>
</div>
</body>
于 2012-07-23T05:05:07.857 に答える