設置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>
?
結果如下
2016-03-12
是padding:10px;你打錯了。。。你的是padding=10px;
2016-04-19
第一個問題大家都幫你解決了,你的第二個問題呢,首先你輸入的都是英文,而且你設置的寬度太短所以會溢出,當然你也可以讓他自動換行,不過這個時候你要給他設置一個屬性,word-wrap:break-word;就可以實現自動換行了,當然你也可以不設置這個屬性,把字母都換成中文 他也會實現自動換行。
2016-03-13
我知道為啥了 因為你那是一個完整的單詞 你試試中文就知道了
2016-03-12
?<!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>
?
2016-03-12
代碼敲錯了應該是padding:10px ?不是padding=10px
2016-03-12
定義需要用“:”而不是“=”,所以是padding:10px;
2016-03-12
你設置了一個房子,然后給房子了填充超過房子的容量,當然會溢出!默認從左到右
2016-03-12
因為你的width只有40