问答详情
源自：12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）

重新表述下，width和height定义的都是内容的宽和高，为什么左右边框会能适应内容和填充的宽度而变，上下边框是固定的文字会超出下边框，而且定义的下部填充似乎没有起到作用，感谢各位的解答

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>填充</title>

<style type="text/css">

#box1{padding:10px 100px 20px 10px;

    width:100px;

    height:100px;

    

    border:10px solid red;

}

</style>

</head>

<body>

<div id="box1">盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1</div>

</body>

</html>


提问者：八尺一寻 2017-07-18 16:18

个回答

  • 真正大英雄王思文
    2017-07-18 16:46:42
    已采纳

    在div盒子中有文字的情况下不设置盒子高度，文字会自动将盒子撑开。

    去掉height:100px;就可以了。

    如果一定要规定盒子的大小，可以让超出部分的多余文字显示成“...”，具体操作查询百度，很多

    0
  • weibo_你好做题_0
    2017-07-18 16:42:04

    文字范围height超过200px;

    padding:100px;100px;100px;10px

    padding:100px 100px 100px 10px;


    0
  • 神都
    2017-07-18 16:41:18

    文字范围height超过200px;

    padding:100px;100px;100px;10px;不是这样写吧

    padding:100px 100px 100px 10px;

    你试试padding-bottom:150px; 看看

    0
  • 宝慕林7239743
    2017-07-18 16:40:09

    程序中块状元素的宽设置为100PX,显然不能显示元素中的全部内容。而填充层设置左右100PX。根据盒模理论：填充层为盒的组成，则不能显示的内容在填充层中显示。

    0
  • 来自乡下的devil
    2017-07-18 16:39:31

    padding加起来都已经200px但是你的宽高也才100px

    1