• 技术文章 >web前端 >css教程

    css标签与标签怎么设置距离

    青灯夜游青灯夜游2021-02-25 11:25:52原创2690

    在css中,可以使用margin系列属性来设置标签与标签间的距离。margin属性用于设置元素的外边距,是自身边框到另一个容器边框之间的距离(即容器外距离),是隔开标签元素与标签元素的间距。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css中,可以使用margin系列属性来设置标签与标签间的距离。

    外边距是指从自身边框到另一个容器边框之间的距离,即容器外距离,是隔开元素与元素的间距。

    【推荐教程:CSS视频教程

    示例:

    新建一个html文件,命名为test.html,用于讲解css怎么调整两个p标签之间的距离。

    在test.html文件内,使用div标签创建一个模块,并设置其class为tzpp,在div标签内,使用p标签创建两行文字,用于测试。

    2.png

    在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

    在css标签内,使用“*”初始化页面中所有的html元素内外边距都为0,设置类名为tzpp的div元素宽度为200px;设置div下面的,边框为1px灰色边框,使用margin-top属性设置两个p标签之间的距离为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>

    在浏览器打开test.html文件,查看实现的效果。

    1.png

    更多编程相关知识,请访问:编程视频!!

    以上就是css标签与标签怎么设置距离的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 外边距
    上一篇:css中keyframes是什么意思 下一篇:css的基本选择器有哪几种
    千万级数据并发解决方案

    相关文章推荐

    • 在css中设置边框可以用哪些属性• css3中怎么调节透明度• css设置字体大小的属性名是什么• css怎么设置鼠标光标形状
    1/1

    PHP中文网