div包裹的iframe有5px的高度差問題

最近遇到乙個問題：用乙個div包裹乙個iframe，但無論如何，div的高度都比iframe高了5px。百思不得其解，後來在網上多方查詢，才發現問題的根源所在。

問題：div高度大於iframe高度5px左右。

問題原因：使用了html5的頭部，在使用如下兩個頭部宣告時會使iframe不能填滿div，從而產生5px的高度差。

1.

2.

解決方案

：在為iframe新增屬性：vertical-align:bottom;或者display:block;

其中vertical-align:bottom;表示把元素的頂端與行中最低的元素的頂端對齊。即是以元素底線作為與父元素垂直對齊的基線。

display:block;表示將元素轉換為塊級元素。iframe本身是乙個內聯框架，他本身是從div中分出了一部分空間，作為自己的空間，而將其轉換為塊級物件時，他就會自己從新的一行開始顯示內容，而不依賴於div。

內聯物件和塊級物件的區別：

內聯物件：不會前後換行，不會從新的一行開始，而是從包裹它的內容一直往後走。

塊級物件：前後換行，從新的一行開始往下走，不依賴於包裹他的物件。

div包裹的iframe有5px的高度差問題

最近遇到乙個問題 用乙個div包裹乙個iframe，但無論如何，div的高度都比iframe高了5px。百思不得其解，後來在網上多方查詢，才發現問題的根源所在。問題 div高度大於iframe高度5px左右。問題原因 使用了html5的頭部，在使用如下兩個頭部宣告時會使iframe不能填滿div，從...

Vue中的的坑（二） 元件的包裹 div

廢話不多說，直接先上 doctype html en utf 8 元件模板分離 title head box h3 使用分離後的元件 cpn div text x template id com 01 閱讀網 h1 這裡是 的內容 p div script vue.js script 註冊元件 vu...

HTML5中的iframe標籤

iframe元素會建立包含另外乙個文件的內聯框架 即行內框架 src src 屬性規定在 iframe 中顯示的文件的 url name 設定該iframe的名字 scrolling scrolling屬性規定是否在 iframe 中顯示滾動條 frameborder frameborder屬性規定...