CSS - 边距(Margins)

CSS - 边距(Margins) 首页 / CSS入门教程 / CSS - 边距(Margins)

无涯教程具有以下属性来设置元素边距。

  • margin                   :  指定一种简写属性,用于在一个声明中设置边距属性。

  • margin-bottom    : 指定元素的底部边距。

  • margin-top           : 指定元素的顶部边距。

  • margin-left           : 指定元素的左边距。

  • margin-right        : 指定元素的右边距。

现在将通过示例了解如何使用这些属性。

margin 属性

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

<html>
   <head>
   </head>
   
   <body>
      <p style="margin: 15px; border:1px solid black;">
         all four margins will be 15px
      </p>
      
      <p style="margin:10px 2%; border:1px solid black;">
         top and bottom margin will be 10px, left and right margin will be 2% 
         of the total width of the document.
      </p>
      
      <p style="margin: 10px 2% -10px; border:1px solid black;">
         top margin will be 10px, left and right margin will be 2% of the 
         total width of the document, bottom margin will be -10px
      </p>
      
      <p style="margin: 10px 2% -10px auto; border:1px solid black;">
         top margin will be 10px, right margin will be 2% of the total 
         width of the document, bottom margin will be -10px, left margin 
         will be set by the browser
      </p>
   </body>
</html> 

它将产生以下输出-

margin-bottom  属性

margin-bottom属性允许您设置元素的底边距。它的长度值可以是%或auto。

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-margins.html

来源:LearnFk无涯教程网

<html>
   <head>
   </head>

   <body>
      <p style="margin-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom margin
      </p>
      
      <p style="margin-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom margin in percent
      </p>
   </body>
</html> 

它将产生以下输出-

margin-top  属性

margin-top属性允许您设置元素的顶部边距。它的长度值可以是%或auto。

<html>
   <head>
   </head>

   <body>
      <p style="margin-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top margin
      </p>
      
      <p style="margin-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

它将产生以下输出-

margin-left 属性

margin-left属性允许您设置元素的左边距。它的长度值可以是%或auto。

无涯教程网

<html>
   <head>
   </head>

   <body>
      <p style="margin-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left margin
      </p>
      
      <p style="margin-left: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html> 

它将产生以下输出-

margin-right 属性

margin-right属性允许您设置元素的右边距。它的长度值可以是%或auto。

<html>
   <head>
   </head>
   
   <body>
      <p style="margin-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right margin
      </p>
      <p style="margin-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right margin in percent
      </p>
   </body>
</html> 

它将产生以下输出-

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

持续交付36讲 -〔王潇俊〕

Go语言核心36讲 -〔郝林〕

设计模式之美 -〔王争〕

Electron开发实战 -〔邓耀龙〕

Vim 实用技巧必知必会 -〔吴咏炜〕

动态规划面试宝典 -〔卢誉声〕

实用密码学 -〔范学雷〕

说透5G -〔杨四昌〕

Rust 语言从入门到实战 -〔唐刚〕

好记忆不如烂笔头。留下您的足迹吧 :)