为了账号安全,请及时绑定邮箱和手机立即绑定

重新表述下,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>


正在回答

5 回答

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

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

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

0 回复 有任何疑惑可以回复我~
#1

八尺一寻 提问者

非常感谢!
2017-07-18 回复 有任何疑惑可以回复我~
#2

八尺一寻 提问者

疑问是为什么左右边框会随着内容和填充而变,上下边框确是固定的,文字会超出下边框
2017-07-18 回复 有任何疑惑可以回复我~

文字范围height超过200px;

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

padding:100px 100px 100px 10px;


0 回复 有任何疑惑可以回复我~

文字范围height超过200px;

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

padding:100px 100px 100px 10px;

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

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

1 回复 有任何疑惑可以回复我~
#1

八尺一寻 提问者

疑问是为什么左右边框会随着内容和填充而变,上下边框确是固定的,文字会超出下边框
2017-07-18 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信