首頁 > web前端 > css教學 > 主體

css中的padding屬性可以是負值嗎? css中padding屬性的詳解

寻∝梦
發布: 2019-05-22 09:20:20
原創
19492 人瀏覽過

關於css盒子模型中的內邊距padding屬性的詳細介紹,還有新手常犯的一個錯誤,內邊距padding屬性真的能寫入負值。這個答案在文章的最後,現在就讓我們一起來看這篇文章吧

css中的padding屬性可以是負值嗎? css中padding屬性的詳解

#首先我們介紹的是第一個問題:

css中的padding屬性可以是負值嗎?這個答案很容易,我們先不介紹,在文章最後有關於內邊距padding屬性的負值使用解釋。

現在我們來看看css中padding屬性的用法:

padding :簡寫屬性在一個宣告中設定所有內邊距屬性(auto/length長度值/ %)

  • padding-top:定義了上方的內邊距

  • padding-right:定義了右邊的內邊距

  • padding-bottom:定義了下方的內邊距

  • #padding-left:定義了左邊的內邊距

這算是padding的介紹了,我們來看個實例具體的了解一下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
table{padding-top:20px;padding-right:50px;padding-bottom:100px;padding-left:20px;border:double;}
</style>
</head>
<body>
<table width="200px"; height="150px">
<tr><td>123</td><td>456</td></tr>
<tr><td>789</td><td>987</td></tr>
</table>
</body>
</html>
登入後複製

上面的程式碼把四個屬性都寫上去了,雖然很亂,但是我們還是要看看程式碼的在瀏覽器中的顯示效果:

css中的padding屬性可以是負值嗎? css中padding屬性的詳解

(想看更多CSS樣式推薦到PHP中文網css使用手冊欄位學習)

效果是不是很明顯,我們來看看這個的程式碼解釋:

  • ##padding -top:20px:定義上方的內邊距為20像素點。

  • padding-right:50px:定義了右邊的內邊距為50個像素點。

  • padding-bottom:100px:定義了下邊的內邊距為100個像素點。

  • padding-left:20px:定義了左邊的內邊距為20個像素點,是不是和上邊的一樣寬。

  • border:double:定義了邊框線為雙實線。


說完了這些,現在再來看看如果把一個寫負值會怎麼樣呢?


<style type="text/css">
table{padding-top:20px;padding-right:50px;padding-bottom:-300px;padding-left:20px;border:double;}
</style>
登入後複製
來個誇張一點的,來個負三百的值,大家來看看效果:


css中的padding屬性可以是負值嗎? css中padding屬性的詳解

測試過後,發現效果幾乎沒有,只是相當於把padding-bottom屬性取消掉是一樣的。

由此可知,css中的padding是不能有負值出現的,出現的話就相當於把那個屬性給取消了。


好了,以上就是關於css樣式中padding用法介紹的文章了,想學更多就到PHP中文網

css學習手冊欄位中學習。有問題的同學可以在下方提問。

【小編推薦】

HTML a標籤如何讓滑鼠懸停變色,css控制a標籤滑鼠懸停樣式詳解

css表格怎麼加入邊框樣式? css表格邊框樣式摘要(附完整實例)

以上是css中的padding屬性可以是負值嗎? css中padding屬性的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!