Home >Web Front-end >CSS Tutorial >How to adjust the upper and lower spacing in css

How to adjust the upper and lower spacing in css

青灯夜游Original: 2021-04-13 15:29:5916169browse

Adjustment method: 1. Use the line-height attribute to set the distance between lines; 2. Use the margin-top and margin-bottom attributes to set the top and bottom margins; 3. Use padding-top and padding -bottom attribute, you can set the top and bottom padding.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Line-height sets the top and bottom spacing of the paragraph

Sets the top and bottom spacing of the p tag css code

p{ line-height:30px}

2. Margin-top and margin-bottom sets the top and bottom spacing of the paragraph

p{margin-top:10px;margin-bottom:10px}

Set the top and bottom spacing of the paragraph by setting margin-top and margin-bottom on the p tag.

margin-top can set the top margin of the element, and margin-bottom can set the bottom margin of the element.

3. padding-top and padding-bottom set the top and bottom spacing of the paragraph

p{padding-top:10px;padding-bottom:10px}

padding-top can set the top padding of the element, padding-bottom can set the element bottom padding.

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				border: 1px solid #000;
				margin: 10px;
			}
			
			.p-a p {
				line-height: 40px;
				text-align: left
			}
			
			.p-b p {
				margin-top: 25px;
				margin-bottom: 25px
			}
			.p-c p {
				padding-top: 20px;
				padding-bottom: 20px
			}
		</style>
	</head>

	<body>
		<div class="abc">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
		<div class="p-a">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
		<div class="p-b">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
		<div class="p-c">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
	</body>

</html>

Rendering:

How to adjust the upper and lower spacing in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to adjust the upper and lower spacing in css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to stop css3 animationNext article：How to stop css3 animation

See more

How to adjust the upper and lower spacing in css

Related articles