css - div的height比设置的值多出来一块？

问题描述

问 题

效果图：

盒子模型：

html代码：

<div class="row" style="clear: left">
                    <img  src="../public/images/games/zljz.png"  class="image"  onclick="go('zljz')">
                <span class="title" onclick="go('zljz')">
                    <div class="gameTitle">
                        <p>逐鹿九州</p>
                        <!--<div  class="hot">热门</div>-->
                        <!--<div  class="rec">推荐</div>-->
                        <!--<div class="fine">精品</div>-->
                        <div class="des">统领雄军，碾压对手，争霸九州！</div>
                    </div>

                    <div style="display: inline-block;float: left"></div>
                </span>
                    <div class="btnInDiv">
                        <img id="today_InZljz" src="../public/images/btnInBefore.png" class="btnIn" onclick="inGame(id)" onmouseover="on(id)" onmouseout="out(id)">
                    </div>
                </div>
            

.row的样式表：

.row{
    width: 100%;
    height: 83px;
    margin: 0px;
    padding: 0px;
}                

解决方案

*, :after, :before {
  box-sizing: border-box;
}

这篇关于css - div的height比设置的值多出来一块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！