DIV の <h> タグは height_html/css_WEB-ITnose に影響します-htmlチュートリアル-php.cn

DIV のタグは height_html/css_WEB-ITnose に影響します

WBOY

リリース： 2016-06-21 09:23:53

オリジナル

1870 人が閲覧しました

<script type="text/javascript">    $(document).ready(function () {        //parent.$.modalbox.resize({w: 500, h: 300});        //parent.$.modalbox.moveto("center");        console.warn($("body>div:first").height());        console.warn($("body>div:first").outerHeight(true));        console.warn($("body>div:first>h3").height());        console.warn($("body>div:first>h3").outerHeight(true));    })</script>

ログイン後にコピー

<body>    <div>        <h3 style="margin-top:10px;            margin-bottom:10px;">            <span id="pass-title">xyz</span>        </h3>    </div>  </body>

ログイン後にコピー

上記は私のテストコードです。
DIV には h3 タグが含まれています。 $("body>div:first>h3").outerHeight(true) だけを使用して h3 の高さを取得すると、Margin を含む合計の高さを取得できますが、
$("body>div: first").outerHeight(true) は div の合計の高さを取得しますが、マージンの高さは含みません。助けてください。

ディスカッション (解決策) への返信

持っている人がいたら、来てください。見てください

お腹が空いた..

LZ を

に変更してもう一度見てください

これは、display 属性の詳細な説明です。 w3school.com.cn/cssref/pr_class_display.asp,

lz div に float:left を追加してみることもできます

css-box モデルは非常に複雑です

これは、display 属性の詳細な説明です

://www.w3school.com.cn/cssref/pr_class_display.asp,

lz div に float:left を追加してみることもできます

CSS ボックスモデルは非常に複雑です

まだうまくいかないようです

これは、display 属性の詳細な説明です http://www.w3school.com .cn/cssref/pr_class_display.asp,

lz また、div に float:left を追加してみることもできます

css-box モデルは非常に複雑です
まだ動作していないようです

問題はありません、float、表示します :inline-block の後は、内部要素によって完全に拡張されます

問題は次のとおりです, 上記の div の margin-top は、collepse h3 の margin-top ですが、div には含まれていないため、div の externalheight が h3 よりも高くなります

これは表示属性の詳細な説明 http://www.w3school.com.cn/cssref/pr_class_display.asp、

lz div に float:left を追加してみることもできます

css - ボックスモデルは非常に複雑です。
まだ動作しないようです

問題ありません、float、display:inline-block はその後内部要素によって完全に開かれます

前後に改行はありません...

?あなたへ?最初に??解決策:

h3?display:inline-block; width:100% 解決策:
h3 の下で
h3{
display:inline-block ;
*display:inline;
*zoom:1;

?Charge:

h3{

*display:inline; 1;
}

ありがとう、あなたの写真はとても役に立ちます。あげます

「上の div の margin-top は、collepse h3 の margin-top です。」これは実情を踏まえてまとめたものですか、それとも公式ドキュメントに記載されているものですか？

?Charge:
?ie の下に h3 が必要ですか? h3{

display:inline-block;

*display:inline; ありがとう、あなたの写真はとても素敵です。あげます

「上の div の margin-top は、collepse h3 の margin-top です。」これは実情を踏まえてまとめたものですか、それとも公式ドキュメントに記載されているものですか？

公式ドキュメント: http://www.w3.org/TR/CSS2/box.html 8-3-1 の行の 1 つ
ボックスの上マージンとその最初のインフローの子の上マージン

DIV の タグは height_html/css_WEB-ITnose に影響します

ディスカッション (解決策) への返信

DIV のタグは height_html/css_WEB-ITnose に影響します