您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页>>建站知识 >> 内容详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

什么时候用padding,什么时候用margin?
发表:紫石头原创模板堂    发表时间:2019-12-03 09:28:11    阅读:
    在HTML文档中,我们一般把HTML标签粗分为块级元素(block)和内联元素(inline)。块级元素是是构成一个html的主要和关键元素, 任意一个块级元素均可以用盒子模型(Box model)来解释说明。margin和padding属性是盒子模型的的组成部分,正确理解这两个属性也是学习用css布局的关键。
    盒子模型:

    任意一个块级元素均由content(内容), padding(内边距), background(包括背景颜色和图片), border(边框), margin(外边距)五个部分组成。

    其中margin属性定义了元素边框外部的空白区域,给其赋值可以设置元素与元素之间的距离
    padding属性定义了元素边框与元素内容之间的空白区域,给其赋值可以设置元素与内容之间距离
    margin和padding的属性及语法:

    1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 可以分别给其四个方向赋值,也可以对值进行简写,其中属性值可以是具体数子,也可以用百分比表示,当用百分比时,百分比参考父元素的宽度。

    margin-top: 40px;
    margin-right: 40px;
    margin-bottom: 40px;
    margin-left: 40px;
    根据上, 右, 下, 左的顺时针规则, 简写为:margin: 40px 40px 40px 40px;
    当上下, 左右margin值分别一致, 可简写为:margin: 40px 40px;
    前一个40px代表上下margin值, 后一个40px代表左右margin值。
    当上下不同,左右一致时,可简写为:margin:20px 40px 30px;
    中间的40px代表左右margin值。
    当上下左右margin值均一致, 可简写为:margin: 40px;
    2. Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离, 其代码, 简写请参考margin属性的写法.
    什么时候用margin?什么时候用padding?
    使用margin值的情况:
    需要在border外侧添加空白时。
    空白处不需要背景(色)时。
    上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。(margin折叠)。
    需要使用负值对页面布局时(margin值可以取负,padding不行)。
    使用padding时的情况:
    需要在border内测添加空白时。
    空白处需要背景(色)时。
    上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。
    margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。
用户留言
访客头像访 客3.234***
最新评论

还没有人评论,快来抢个沙发!

模板推荐
工作时间:周一至周五(08:30~18:00)
Copyright © 2003 - 2016 永易搜科技 All Rights Reserved 豫ICP备14011598号-7