CSS 填充

最新推荐文章于 2023-09-20 08:43:26 发布

冷月醉雪

最新推荐文章于 2023-09-20 08:43:26 发布

阅读量763

点赞数

分类专栏： CSS 实例 CSS 文章标签： CSS 填充实例

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/81217976

版权

CSS 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

CSS 实例

22 篇文章 0 订阅

订阅专栏

设置元素的左部填充

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p.padding {padding-left:2cm;}
			p.padding2 {padding-left:50%;}
		</style>
	</head>
	<body>
		<p>这是一个没有左填充边距的文本。</p>
		<p class="padding">这个文本的左填充边距为2厘米。</p>
		<p class="padding2">这个文本的左填充边距为50%。</p>
	</body>
</html>

设置元素的右部填充

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p.padding {padding-right:2cm;}
			p.padding2 {padding-right:50%;}
		</style>
	</head>
	<body>
		<p>这是一个没有右填充边距的文本。这是一个没有右填充边距的文本。这是一个没有右填充边距的文本。</p>
		<p class="padding">这个文本的右填充边距为2厘米。这个文本的右填充边距为2厘米。这个文本的右填充边距为2厘米。</p>
		<p class="padding2">这个文本的右填充边距为50%。这个文本的右填充边距为50%。这个文本的右填充边距为50%。</p>
	</body>
</html>

设置元素的顶部填充

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p.padding {padding-top:2cm;}
			p.padding2 {padding-top:50%;}
		</style>
	</head>
	<body>
		<p>这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。</p>
		<p class="padding">这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。</p>
		<p class="padding2">这个文本的上部填充边距为50%。这个文本的上部填充边距为50%。这个文本的上部填充边距为50%。</p>
	</body>
</html>

设置元素的底部填充

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p.padding {padding-bottom:2cm;}
			p.padding2 {padding-bottom:50%;}
		</style>
	</head>
	<body>
		<p>这是一个没有底部填充边距的文本。这是一个没有底部填充边距的文本。这是一个没有底部填充边距的文本。</p>
		<p class="padding">这个文本的底部填充边距为2厘米。这个文本的底部填充边距为2厘米。这个文本的底部填充边距为2厘米。</p>
		<p class="padding2">这个文本的底部填充边距为50%。这个文本的底部填充边距为50%。这个文本的底部填充边距为50%。</p>
	</body>
</html>

在一个声明中设置所有的填充属性

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<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>

参考：

https://www.yuque.com/docs/share/dde6d915-ad51-4bcd-9034-e1731ebcb379

冷月醉雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 填充

设置元素的左部填充&lt;!DOCTYPE html &gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;style&gt; p.padding {padding-left:2cm;}
复制链接

扫一扫