css上下间距的设置方法

这篇文章主要介绍了css上下间距的设置方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

css设置上下间距的方法:1、使用“行高:间距值;“样式来设置上下间距;2、使用margin-top和margin-bottom属性来设置上下间距;3、使用padding-top和padding-bottom属性来设置。

<强> 1,使用行高属性设置上下间距

& lt; ! DOCTYPE  html> 　　& lt; html> 　　 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; style 类型=拔谋?css"比; 　　div { 　　宽度:200 px; 　　边界:1 px  solid 红色; 　　} 　　.abc  { 　　行高:50 px; 　　} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; div 比; 　　& lt; p>第一段& lt;/p> 　　& lt; p>第二段& lt;/p> 　　& lt; p>第三段& lt;/p> 　　& lt; p>第四段& lt;/p> 　　& lt;/div> & lt; br> 　　& lt; div 类=癮bc"祝辞 　　& lt; p>第一段& lt;/p> 　　& lt; p>第二段& lt;/p> 　　& lt; p>第三段& lt;/p> 　　& lt; p>第四段& lt;/p> 　　& lt;/div> 　　& lt;/body> 　　 　　& lt;/html>

效果图:

<强> 2,使用margin-top和margin-bottom属性来设置上下间距

& lt; ! DOCTYPE  html> 　　& lt; html> 　　 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; style 类型=拔谋?css"比; 　　div { 　　宽度:200 px; 　　边界:1 px  solid 红色; 　　} 　　.abc  p  { 　　margin-top: 50 px;, 　　margin-bottom: 50 px; 　　} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; div 比; 　　& lt; p>第一段& lt;/p> 　　& lt; p>第二段& lt;/p> 　　& lt; p>第三段& lt;/p> 　　& lt; p>第四段& lt;/p> 　　& lt;/div> & lt; br> 　　& lt; div 类=癮bc"祝辞 　　& lt; p>第一段& lt;/p> 　　& lt; p>第二段& lt;/p> 　　& lt; p>第三段& lt;/p> 　　& lt; p>第四段& lt;/p> 　　& lt;/div> 　　& lt;/body> 　　 　　& lt;/html>

效果图:

【, html视频教程】

<强> 3,使用padding-top和padding-bottom属性来设置上下间距

& lt; ! DOCTYPE  html> 　　& lt; html> 　　 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; style 类型=拔谋?css"比; 　　div { 　　宽度:200 px; 　　边界:1 px  solid 红色; 　　} 　　.abc  p  { 　　padding-top: 30 px;, 　　padding-bottom: 30 px; 　　} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; div 比; 　　& lt; p>第一段& lt;/p> 　　& lt; p>第二段& lt;/p> 　　& lt; p>第三段& lt;/p> 　　& lt; p>第四段& lt;/p> 　　& lt;/div> & lt; br> 　　& lt; div 类=癮bc"祝辞 　　& lt; p>第一段& lt;/p> 　　& lt; p>第二段& lt;/p> 　　& lt; p>第三段& lt;/p> 　　& lt; p>第四段& lt;/p> 　　& lt;/div> 　　& lt;/body> 　　 　　& lt;/html>

效果图:

感谢你能够认真阅读完这篇文章,希望小编分享的“css上下间距的设置方法”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

css上下间距的设置方法