热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

CSS5.3框模型-内边距和外边距

CSS5.3框模型-内边距和外边距1.内边距:padding(填充,内边距)可能的值:数值或百分比,默认值0注:百分比是相对于其父元素的width计算

CSS 5.3 框模型-内边距和外边距

 

1.内边距:padding(填充,内边距)

可能的值:数值或百分比,默认值0

注:百分比是相对于其父元素的 width计算的,这一点与外边距一样。所以,如果父元素的width改变,它们也会改变。

例如:

①padding5px(上)2cm(右)1em(下)10%(左);//顺时针

padding5px(上)2cm(右 左)1em(下);

padding5px(上 下)2cm(右 左);

④padding5px(上 下 右 左);

单边内边距属性:

上边:padding-top百分比是相对于其父元素的 width计算的

右边:padding-right百分比是相对于其父元素的 width计算的

下边:padding-bottom百分比是相对于其父元素的 width计算的

左边:padding-left百分比是相对于其父元素的 width计算的

 

2.外边距:margin(边缘,外边距)

可能的值:数值或百分比,默认值0

注:百分比是相对于其父元素的 width计算的,这一点与内边距一样。所以,如果父元素的width改变,它们也会改变。

例如:

①margin5px(上)2cm(右)1em(下)10%(左);//顺时针

margin5px(上)2cm(右 左)1em(下);

margin5px(上 下)2cm(右 左);

④margin5px(上 下 右 左);

单边外边距属性:

上边:margin-top 百分比是相对于其父元素的 height计算的

右边:margin-right 百分比是相对于其父元素的 height 计算的

下边:margin-bottom 百分比是相对于其父元素的 width 计算的

左边:margin-left 百分比是相对于其父元素的 height 计算的

 

3.外边距合并,当两个竖直方向的外边距挨着时,会合并成一个,合并后尺寸为大的外边距尺寸。

当浮动后的水平方向,两个外边距不合并。

 

作用:以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。

 


推荐阅读
  • CentOS 7.2 配置防火墙端口开放
    本文介绍如何在 CentOS 7.2 系统上配置防火墙以开放特定的服务端口,包括 FTP 服务的临时与永久开放方法,以及如何验证配置是否生效。 ... [详细]
  • 本文介绍了如何利用Java中的URLConnection类来实现基本的网络爬虫功能,包括向目标网站发送请求、接收HTML响应、解析HTML以提取所需信息,并处理可能存在的递归爬取需求。 ... [详细]
  • Java与JSON互转:实现JSON到Java对象及Java对象到JSON的转换
    本文详细介绍了如何在Java中实现JSON数据与Java对象之间的相互转换,包括代码示例和常见问题解决方法。 ... [详细]
  • MySQL锁机制详解
    本文深入探讨了MySQL中的锁机制,包括表级锁、行级锁以及元数据锁,通过实例详细解释了各种锁的工作原理及其应用场景。同时,文章还介绍了如何通过锁来优化数据库性能,避免常见的并发问题。 ... [详细]
  • 本文探讨了如何利用SqlDependency执行复杂的SQL查询,并确保在多线程环境下的安全性与效率。 ... [详细]
  • Python数据类型6 字典
    字典Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度。但它是无序的,包 ... [详细]
  • 本文详细介绍了ActivityManagerService (AMS) 的工作原理及其在Android系统中的重要角色。AMS作为system_server进程的一部分,在系统启动时加载,负责管理和协调应用程序中的Activity和服务(Service)。文章将通过具体的接口图和通信流程,帮助读者更好地理解AMS的工作机制。 ... [详细]
  • EasyMock实战指南
    本文介绍了如何使用EasyMock进行单元测试,特别是当测试对象的合作者依赖于外部资源或尚未实现时。通过具体的示例,展示了EasyMock在模拟对象行为方面的强大功能。 ... [详细]
  • 题目 CF1245F: 清理春天的数学挑战 描述了一个数学问题:给定一个区间 [L, R](0 ≤ L, R ≤ 10^9),求该区间内满足 x + y = x ∧ y 的数对 (x, y) 的总数。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文详细介绍了在使用Socket进行网络编程时,遇到链接器错误`undefined reference to WSAStartup@8`的解决方案,适用于多种开发环境。 ... [详细]
  • python开发mysql:单表查询&多表查询
    一单表查询,以下是表内容二多表查询,一下是表内容三总结&表创建过程单 ... [详细]
  • 本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]
  • MacOS 重装指南
    本文详细介绍了如何通过U盘启动并重新安装MacOS,包括遇到安装问题时的解决方案。 ... [详细]
  • 如何恢复CAD中意外丢失的图纸数据
    当使用CAD进行绘图时,因突然断电或其他原因导致计算机关闭可能会造成工作数据的丢失。然而,通过利用CAD软件的自动保存功能,用户通常能够恢复至最近一次自动保存的数据状态。 ... [详细]
author-avatar
2012-随意_544
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有