设置padding为什么不起作用
代码如下，看到大家说块级元素默认与父级元素同宽，那么我理解为系统默认内容宽度width与父级同宽，而padding为0px。于是我将width调整为200px，这个时候调整padding为10px，没有用。这是什么原因？
另外尝试使用另外<p>，发现在<p>中设置padding是有用的。
但是！
当定义了width的值，同时多打几个字，文本长了起来，竟然超越了border。这又是何解？难道右padding自动变负值？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>宽度和高度</title>
<style type="text/css">
li{
width:200px;
border:1px dotted #ccc;
padding=10px;
margin:10px;
}
p{
border:1px solid #ccc;
padding:50px;
width:40px;
background:pink;
}
</style>
</head>
<body>
<ul>
<li>别让不会说话害了你</li>
<li>二十七八岁就应该有的见识</li>
<li>别让不好意思害了你</li>
</ul>
<p>123fasddfadsfasdfdadfadfadafdsczxcdw</p>
</body>
</html>
结果如下
个回答
-
- DaylightAllure
- 2016-03-12 23:41:03
是padding:10px;你打错了。。。你的是padding=10px;
-
- 忆_卿
- 2016-04-19 17:47:07
第一个问题大家都帮你解决了，你的第二个问题呢，首先你输入的都是英文，而且你设置的宽度太短所以会溢出，当然你也可以让他自动换行，不过这个时候你要给他设置一个属性，word-wrap:break-word;就可以实现自动换行了，当然你也可以不设置这个属性，把字母都换成中文 他也会实现自动换行。
-
- Feater
- 2016-03-13 00:11:04
我知道为啥了 因为你那是一个完整的单词 你试试中文就知道了
-
- hxx__326
- 2016-03-12 23:53:55
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>宽度和高度</title>
<style type="text/css">
li{
width:200px;
border:1px dotted #ccc;
padding:10px; /* padding=10px;这个错了*/
margin:10px;
}
p{
border:3px solid black;
padding:50px;
width:40px;
height:200px;
background:pink;
overflow:auto; /*超出范围的以滚动条显示*overflow:hidden;多出的内容隐藏/
}
</style>
</head>
<body>
<ul>
<li>别让不会说话害了你</li>
<li>二十七八岁就应该有的见识</li>
<li>别让不好意思害了你</li>
</ul>
<p>123fasddfadsfasdfdadfadfadafdsczxcdw123fasddfadsfasdfdadfadfadafdsczxcdw123fasddfadsfasdfdadfadfadafdsczxcdw</p>
</body>
</html>
-
- 果果zzl
- 2016-03-12 23:53:43
代码敲错了应该是padding:10px 不是padding=10px
-
- Maiguerite
- 2016-03-12 23:48:28
定义需要用“：”而不是“=”，所以是padding：10px;
-
- Feater
- 2016-03-12 23:44:43
你设置了一个房子，然后给房子了填充超过房子的容量，当然会溢出！默认从左到右
-
- applicatiom
- 2016-03-12 23:39:14
因为你的width只有40