iframeの余白

Question

お世話になっております。

iframeを使ってPC用販売説明文に楽天goldで作成したページを埋め込みたかったのですが、埋め込んだページの下に大きな余白ができてしまいます。
こちらの余白を消すにはどのようにすればよろしいでしょうか…？

該当ページ(テスト用)↓
https://item.rakuten.co.jp/japannail/10000005/

宜しくお願い致します。###HR######IMG0fa56cec51c20628c997b9dcdf39d57f9.pngIMG0###

Answer

ECマスターズの伊藤です。

> iframeを使ってPC用販売説明文に楽天goldで作成したページを埋め込みたかったのですが、埋め込んだページの下に大きな余白ができてしまいます。
> こちらの余白を消すにはどのようにすればよろしいでしょうか…？

iframeで読み込んでいてただいている
https://www.rakuten.ne.jp/gold/japannail/p-chart/colorgel-list.html
が、横幅が商品説明文のサイズである
875pxを超えるため、
上記を表示させるためのiframeに

transform: scale(0.72);

を適用頂いていますが、

高さは、もとのiframe分(0.72かけていないサイズ)で
取られているため、
その分、余白が表示されています。

解決方法としては
https://www.rakuten.ne.jp/gold/japannail/p-chart/colorgel-list.html
の内容を横幅875pxにしていただくのが
よろしいです。


一時的な解決方法として
style="margin-bottom: -【数値】;
にて、marginを無理やり詰めることも可能ですので、
お試しくださいませ。

例：

Answer

迅速な対応ありがとうございます！お陰様で解決いたしました。