加入收藏 | 设为首页 | 会员中心 | 我要投稿 聊城站长网 (https://www.0635zz.com/)- 智能语音交互、行业智能、AI应用、云计算、5G!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

CSS边距设置的边值顶属性怎样用

发布时间:2023-07-03 12:29:27 所属栏目:语言 来源:
导读:  这篇主要是介绍“CSS上边距设置的margin-top属性如何使用”的内容了,下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家解决CSS上边距设置的ma
  这篇主要是介绍“CSS上边距设置的margin-top属性如何使用”的内容了,下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家解决CSS上边距设置的margin-top属性如何使用的问题,下面我们一起来了解看看吧。
 
  CSS设置上边距的方法一:使用margin-top属性
 
  margin-top属性可以设置元素的上外边距
 
  围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
 
  外边距属性受任何长度单位(可以是像素、英寸、毫米或 em。)、百分数值甚至负值。
 
  属性值:
 
  值 描述
 
  auto 浏览器设置的上外边距。
 
  length 定义固定的上外边距。默认值是 0。
 
  % 定义基于父对象总宽度的百分比上外边距。
 
  inherit 规定应该从父元素继承上外边距。
 
  示例:
 
  <!DOCTYPE html>
 
  <html>
 
  <head>
 
  <meta charset="utf-8">
 
  <style>
 
  p.ex1 {margin-top:2cm;}
 
  </style>
 
  </head>
 
  <body>
 
  <p>一个没有指定边距大小的段落。</p>
 
  <p class="ex1">一个2厘米上边距的段落。</p>
 
  <p>一个没有指定边距大小的段落。</p>
 
  </body>
 
  </html>
 
  css设置上边距的方法二:使用padding-top属性
 
  padding-top属性可以设置元素的上内边距
 
  元素的内边距在边框和内容区之间,是元素边框与元素内容之间的空白区域
 
  内边距属性接受长度值或百分比值,但不允许使用负值。
 
  属性值:
 
  值 描述
 
  length 规定以具体单位计的固定的上内边距值,比如像素、厘米等。默认值是 0px。
 
  % 定义基于父元素宽度的百分比上内边距。此值不会如预期的那样工作于所有的浏览器中。
 
  inherit 规定应该从父元素继承上内边距。
 
  示例:
 
  <!DOCTYPE html>
 
  <html>
 
  <head>
 
  <meta charset="utf-8">
 
  <style>
 
  p.padding {padding-top:2cm;}
 
  p.padding2 {padding-top:20%;}
 
  </style>
 
  </head>
 
  <body>
 
  <p>这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。</p>
 
  <p class="padding">这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。</p>
 
  <p class="padding2">这个文本的上部填充边距为20%。这个文本的上部填充边距为20%。这个文本的上部填充边距为20%。</p>
 
  </body>
 
  </html>
 
 

(编辑:聊城站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!