首頁 > web前端 > css教學 > css中改變元素的內填充用什麼屬性

css中改變元素的內填充用什麼屬性

青灯夜游
發布: 2021-12-09 14:10:41
原創
4282 人瀏覽過

css中改變元素的內填充用:1、padding屬性,可以同時改變元素上下左右的內填充;2、padding-top、padding-bottom、padding-left和padding-right屬性,分別改變元素上下左右的內填充。

css中改變元素的內填充用什麼屬性

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

css中改變元素的內填

#1、直接使用padding屬性

padding屬性是一個簡寫屬性,定義元素邊框與元素內容之間的空間,即上下左右的內填充。

語法:

padding:上内填充 右内填充 下内填充 左内填充;

padding:上内填充 左右内填充 下内填充;

padding:上下内填充 左右内填充;

padding:上下左右的内填充;
登入後複製

範例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>

<body>
<p class="ex1">这个文本两边的填充边距一样。每边的填充边距为2厘米。</p>
<p class="ex2">这个文本的顶部和底部填充边距都为0.5厘米,左右的填充边距为3厘米。</p>
</body>
</html>
登入後複製

css中改變元素的內填充用什麼屬性

#2、使用padding-top、padding-bottom、 padding-left和padding-right屬性

  • padding-top:設定元素的頂部填入    

  • padding-bottom:設定元素的底部填入   

  • padding-left:設定元素的左部填入   

  • padding-right:設定元素的右邊填入   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p{
				border: 1px solid red;
			}
			p.ex1 {
				padding-top: 15px;
			}

			p.ex2 {
				padding-bottom: 15px;
			}
			p.ex3 {
				padding-left: 15px;
			}
			p.ex4 {
				padding-right: 15px;
			}
		</style>
	</head>

	<body>
		<p class="ex1">文本上填充15px。</p>
		<p class="ex2">文本下填充15px。</p>
		<p class="ex3">文本左填充15px。</p>
		<p class="ex4">文本右填充15px。</p>
	</body>
</html>
登入後複製

css中改變元素的內填充用什麼屬性

(學習影片分享:css影片教學

以上是css中改變元素的內填充用什麼屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板