DIV中<h>标签影响高度_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-21 09:23:53
asal
1866 orang telah melayarinya

<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>
Salin selepas log masuk

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


以上是我的测试代码。
DIV中包含一个h3标签,单独用$("body>div:first>h3").outerHeight(true)取h3的高度可以取到包含Margin的总高度,但是
用$("body>div:first").outerHeight(true)取div的总高度却不包含margin的高度,求高手帮忙


回复讨论(解决方案)

有人没啊,快来看看啦

饿..

LZ改成

再看看

这是display属性详解 http://www.w3school.com.cn/cssref/pr_class_display.asp,

lz也可以把div加个float:left试试. 

css-box模型还是挺复杂的

这是display属性详解 http://www.w3school.com.cn/cssref/pr_class_display.asp,

lz也可以把div加个float:left试试. 

css-box模型还是挺复杂的



好像还是不行啊


这是display属性详解 http://www.w3school.com.cn/cssref/pr_class_display.asp,

lz也可以把div加个float:left试试. 

css-box模型还是挺复杂的



好像还是不行啊
没问题啊float, 和 display:inline-block之后会被内部元素完全撑开

事?上div的margin-top是collepse h3??的 margin-top,但?不算在div?,所以div??的outerheight ?比h3?的低



这是display属性详解 http://www.w3school.com.cn/cssref/pr_class_display.asp,

lz也可以把div加个float:left试试. 

css-box模型还是挺复杂的



好像还是不行啊
没问题啊float, 和 display:inline-block之后会被内部元素完全撑开

前后不换行的...

?替你?了一??解:


你可以?h3?display:inline-block; width:100% 解?

?充:
在?ie下h3要?
h3{
    display:inline-block;
    *display:inline;
    *zoom:1;
}

?充:
在?ie下h3要?
h3{
    display:inline-block;
    *display:inline;
    *zoom:1;
}



谢谢了,你的图很有用哦。分给你了

”事?上div的margin-top是collepse h3??的 margin-top“   这个是你根据实际情况总结的还是官方文档有说的?


?充:
在?ie下h3要?
h3{
    display:inline-block;
    *display:inline;
    *zoom:1;
}



谢谢了,你的图很有用哦。分给你了

”事?上div的margin-top是collepse h3??的 margin-top“   这个是你根据实际情况总结的还是官方文档有说的?

官方文?:  http://www.w3.org/TR/CSS2/box.html 8-3-1底下其中一行
top margin of a box and top margin of its first in-flow child
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan