时间:2021-07-01 10:21:17 帮助过:70人阅读
那么怎样使用css margin 属性设置文字的段落间距?
css margin可以实现上下段落之间间距距离样式的设置,我们知道margin是设置上下左右对象与对象之间距离设置,这里段落也可以使用此css样式实现间距。
下面我们通过简单的代码示例,为大家详细解说关于css margin 属性设置和调整文字段落间距的方法!
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>margin设置段落间距</title> <style> .cx{ margin: 20px 0; } /* css注释: 设置margin为对象上下间距10px */ </style> </head> <body> <p>第一段,没有设置间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p>第二段,没有设置间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p class="cx">第三段,设置了间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> </body> </html>
效果图:
其实,margin 属性 是一个简写属性,可以设置元素的所有外边距,使用margin 属性可以同时设置段落的上下间距。我们也可以一个一个设置外边距,设置一个段落的上间距或下间距,方法如下:
margin-top:设置元素的上外边距。
margin-bottom:设置元素的下外边距。
下面我们通过简单的代码示例,为大家详细解说实现方法!
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>margin设置段落间距</title> <style> *{margin: 0px;padding: 0px;} .a1{ margin-top: 20px; } .a2{ margin-bottom: 20px; } </style> </head> <body> <p>第一段,没有设置间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p class="a1">第二段,单独设置上间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p>第三段,没有设置间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p class="a2">第四段,单独设置下间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> <p>第五段,没有设置间距。我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!我是一段测试代码!</p> </body> </html>
效果图:
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程!
相关推荐:
php公益培训视频教程
css如何使用内边距来调整段落间距?(代码实例)
css如何设置行间距?css文本文字的行间距设置(代码实例)
css如何设置文字间距?word-spacing属性与letter-spacing属性的简单比较
以上就是css如何设置段落间距?margin 属性设置段落间距(代码实例)的详细内容,更多请关注Gxl网其它相关文章!