如何使用 CSS 设置段落元素的边距？

2025年3月17日 | 阅读 3 分钟

CSS 边距用于在任何指定的边框外部创建组件周围的空间。CSS 完全控制边距。有用于定义组件每侧边缘的属性（右、上、下和左）。

CSS 包含用于指定组件每侧边缘的属性。

margin-top
margin-bottom
margin-right
margin-left

所有边距属性都可以赋以下值：

inherit：表示边距应从父元素继承。
length：以像素和厘米等单位定义边距。
auto：浏览器自动计算边距。
%：以包含元素的宽度百分比定义边距。

示例 1： HTML div 用于在给定示例中设置段落样式。段落的边距如下：右边距 50px，上边距 50px，左边距 100px，下边距 100px，背景色 #FFE6F7。边框宽度将为 4px，并且为实线 #367E18。

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<style>
	div {
		background-color: #FFE6F7;
		border: 4px solid #367E18;
		margin: 50px 50px 100px 100px;

	}
	</style>
</head>
<body>
	<h2 style="color: red">javaTpoint</h2>
	<b>Set the paragraph element's margin</b>

	<div>
		College is widely regarded as one of the most memorable years of a person's life.
		It is not at all like school. 
College life exposes us to fresh experiences and things we were not previously acquainted with. 
Some people associate college with enjoying life to the fullest and partying hard. Others, on the other hand, must take their careers seriously and work hard in order to have a brighter future. 
Nonetheless, we will all recall our college years fondly. Not everyone is able to attend college.
 People are unable to attend college for a wide range of reasons.
 They may not always have a solid financial foundation to do so, and they may have other obligations to meet.
Those who have gone through the college experience frequently desire they could go to the past and relive everything.
	</div>
</body>
</html>

输出

How to Set the Margins of a Paragraph Element using CSS

示例 2： 在整个给定示例中，边距相同，宽度为 300px，段落居中，因为它的边距设置为 auto。边框宽度为 80px，颜色为紫色。

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<style>
	div {
		width: 250px;
		margin: auto;
		border: 75px solid #F07DEA;
	}
	</style>
</head>
<body>
	<h2 style="color: red">javaTpoint</h2>
	<b>Using margin:auto</b>
	<p>
				College is widely regarded as one of the most memorable years of a person's life.
		It is not at all like school. 
College life exposes us to fresh experiences and things we were not previously acquainted with. 
Some people associate college with enjoying life to the fullest and partying hard. Others, on the other hand, must take their careers seriously and work hard in order to have a brighter future. 
Nonetheless, we will all recall our college years fondly. Not everyone is able to attend college.
 People are unable to attend college for a wide range of reasons.
 They may not always have a solid financial foundation to do so, and they may have other obligations to meet.
Those who have gone through the college experience frequently desire they could go to the past and relive everything.
	</p>
	<div>
Because it contains <i>Margin: auto;</i> this div will be horizontally centred.
	</div>
</body>
</html>

输出

下一主题如何在您的网页上添加 Google 翻译按钮

如何使用 CSS 设置段落元素的边距？

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何使用 CSS 设置段落元素的边距？

相关帖子

HTML 空格代码

HTML Localhost Index

HTML 中的根元素

HTML 视口

HTML 中的元数据包含在哪一部分

简单的 HTML 页面

Web 设计中的微交互

如何创建 HTML 文本框

HTML 表格固定列宽

HTML 注释快捷键

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器