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

设置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>

 

结果如下

http://img1.sycdn.imooc.com//56e4348d0001992f04610297.jpg

正在回答

8 回答

是padding:10px;你打错了。。。你的是padding=10px;

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

我们的洗手间 提问者

非常感谢!
2016-03-12 回复 有任何疑惑可以回复我~

第一个问题大家都帮你解决了,你的第二个问题呢,首先你输入的都是英文,而且你设置的宽度太短所以会溢出,当然你也可以让他自动换行,不过这个时候你要给他设置一个属性,word-wrap:break-word;就可以实现自动换行了,当然你也可以不设置这个属性,把字母都换成中文 他也会实现自动换行。

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

我们的洗手间 提问者

多谢你的回答!
2016-04-21 回复 有任何疑惑可以回复我~
#2

忆_卿 回复 我们的洗手间 提问者

客气,我也在学 - - 碰到了两个问题,一直找不出原因。。。大学没认真学,现在又得学。。
2016-04-21 回复 有任何疑惑可以回复我~

我知道为啥了 因为你那是一个完整的单词 你试试中文就知道了

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

我们的洗手间 提问者

确实,好神奇!
2016-03-13 回复 有任何疑惑可以回复我~

 <!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>

 


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

我们的洗手间 提问者

非常感谢!
2016-03-12 回复 有任何疑惑可以回复我~

代码敲错了应该是padding:10px  不是padding=10px

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

定义需要用“:”而不是“=”,所以是padding:10px;

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

你设置了一个房子,然后给房子了填充超过房子的容量,当然会溢出!默认从左到右

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

我们的洗手间 提问者

既然设置了width,就不能自动转下一行吗?
2016-03-12 回复 有任何疑惑可以回复我~
#2

Feater 回复 我们的洗手间 提问者

好吧,是你打错的原因,我是从结果超前来考虑的
2016-03-12 回复 有任何疑惑可以回复我~

因为你的width只有40

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

举报

0/150
提交
取消

设置padding为什么不起作用

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