How to set the distance between css tags and tags-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set the distance between css tags and tags

青灯夜游

Feb 25, 2021 am 11:25 AM

cssmargins

In CSS, you can use the margin series attributes to set the distance between labels. The margin attribute is used to set the outer margin of an element, which is the distance between its own border and the border of another container (i.e., the outer distance of the container). It is the distance between label elements and label elements.

How to set the distance between css tags and tags

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

In CSS, you can use the margin series attributes to set the distance between labels.

margin: Set all margin properties in one declaration
margin-bottom: Set the bottom margin of the element
margin-left: Set the left margin of the element
margin-right: Set the right margin of the element
margin-top: Set the top margin of the element

The margin refers to the distance from its own border to the border of another container, that is, the outer distance of the container, which separates the element from The spacing between elements.

[Recommended tutorial: CSS video tutorial]

Example:

Create a new html file and name it test.html, used to explain how to adjust the distance between two p tags using css.

In the test.html file, use the div tag to create a module and set its class to tzpp. Within the div tag, use the p tag to create two lines of text for testing.

How to set the distance between css tags and tags

##In the test.html file, write the tag. The css style of the page will be written in this within the label.

In the css tag, use "*" to initialize the inner and outer margins of all html elements in the page to 0, set the width of the div element with the class name tzpp to 200px; set the border below the div to 1px gray For the border, use the margin-top attribute to set the distance between the two p tags to 20px.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.tzpp{
				width: 200px;
			}
			.tzpp p{
				line-height: 30px;
				border: 1px solid #ccc;
				margin-top:20px ;
			}
		</style>
	</head>

	<body>
		<div class="tzpp">
		<p>这是第一行测试文本。</p>
		<p>这是第二行测试文本。</p>
		</div>
	</body>

</html>

Open the test.html file in the browser to check the effect.

How to set the distance between css tags and tags

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of How to set the distance between css tags and tags. 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

Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS SubgridApr 14, 2025 am 11:20 AM

In this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox

Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification PromptsApr 14, 2025 am 11:15 AM

In this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification

The Power (and Fun) of Scope with CSS Custom PropertiesApr 14, 2025 am 11:11 AM

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set

We Are ProgrammersApr 14, 2025 am 11:04 AM

Building websites is programming. Writing HTML and CSS is programming. I am a programmer, and if you're here, reading CSS-Tricks, chances are you're a

How Do You Remove Unused CSS From a Site?Apr 14, 2025 am 10:59 AM

Here's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells

An Introduction to the Picture-in-Picture Web APIApr 14, 2025 am 10:57 AM

Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop

Ways to Organize and Prepare Images for a Blur-Up Effect Using GatsbyApr 14, 2025 am 10:56 AM

Gatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually

Oh Hey, Padding Percentage is Based on the Parent Element's WidthApr 14, 2025 am 10:55 AM

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the

See all articles