前言

padding 简写属性在一个声明中设置所有内边距属性,实际上在使用过程中它对block元素和内联元素的处理是不一样的。

正文

对于block元素

如果宽度非auto那么容器会变大，如果容器宽度自适应或者设置了box-sizing:border-box,并且值在可控区间内是不会影响内容宽度的，如果值暴走那么容器肯定会变化。

对于内联元素

内联元素的padding只会影响左右尺寸，上下尺寸不影响但是背景色会显现，当上下值暴走的时候会影响外容器的高度。

利用这一特性我们可以做类似于：注册 | 登陆 这种中间的间隔线

margin,padding的百分比是相对与父元素的宽度来进行计算的

如果父元素没有设置宽度（脱离文档流[float,absolute,fixed]），那又该怎样计算呢？？

实践的答案是：padding的百分比没有用了,这里不是说padding不生效，而是脱离文档里后，父元素没有宽度了，和高度了，这个时候父元素宽度就是内部元素宽度，所以padding是没有意义的。当然需要设置父元素的宽度为100%，这个时候依然有效。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div style="position:relative">

 <div style="position:absolute">

   <span style="display:inline-block;padding: 200px;">

  test the padding

   </span>

 </div>

    </div>

</body>

</html>

css 你真的了解padding吗?的更多相关文章

  1. DIV+CSS：Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  2. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

  3. 使用CSS中margin和padding的基础和注意事项

    在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...

  4. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  5. 你说你精通CSS，真的吗？

    以前做项目的时候,学习了HTML和CSS,感觉这两个比较简单,在W3school里学习了一下之后,就觉得自己已经没问题了.可是,真正要做一个好看的页面,我还是要写好久.其实,对于CSS,我并没有像我以 ...

  6. css 取消默认的padding

    ;;} --透明 兼容写法 filter:alpha(opacity=90);-moz-opacity:0.9; -khtml-opacity: 0.9;opacity: 0.9;

  7. 【CSS】Beginner5:Margins&Padding

    1.Properties for spacing-out elements 外边距:A margin is the space space outside something 内边距:padding ...

  8. css系列教程--margin padding column(完结)

    margin/margin-left/margin-right/margin-top/margin-bottom设置边距属性margin:0;--所有外边距0margin:0 1px;--margin ...

  9. CSS：margin和padding之谜

    margin外边距,padding内边距.光看书本的介绍,理解起来好费劲,那咱就举个荔枝:你家的保险箱,是那种镶在墙壁里的,保险箱与墙壁的距离就是margin,保险箱壁就是所谓的border,保险箱与 ...

  10. css：margin和padding的百分之使用

    #app { position: fixed; width: 94%; height: 100%; background: pink; padding: 0px 3% 0px 3%;} 如上代码,最终 ...

随机推荐

  1. bat 执行 窗口jar包

    bat 执行 窗口jar包 @echo off start javaw -jar .\yourname.jar exit

  2. pcm5102芯片解析之基本概念

    一 前记 1 在音频领域深耕,那就要不断的前行.最近有几个项目需要用到pcm5102这颗料,藉此机会,针对这个料进行深入的研究一下.做一一些简要的分析. 二 概念 音频芯片的指标,其实,很多年都没啥变 ...

  3. stm32芯片的SPI接口调试总结之轮询模式

    一 概念 1 组成 SPI系统可直接与各个厂家生产的多种标准外围器件接口,它只需4条线:串行时钟线(SCK).主机输入/从机输出数据线(MISO).主机输出/从机输入数据线(MOSI)和低电平有效的从 ...

  4. CSS(选择器、字体属性、文本属性、三种引入方式）

    css简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表. CSS 是也是一种标记语言 CSS 主要用于设置 H ...

  5. 浅析三维模型3DTile格式轻量化处理常见问题与处理措施

    浅析三维模型3DTile格式轻量化处理常见问题与处理措施 三维模型3DTile格式的轻量化处理是大规模三维地理空间数据可视化的关键环节,但在实际操作过程中,往往会遇到一些问题.下面我们来看一下这些常见 ...

  6. C# 12 拦截器 Interceptors

    拦截器Interceptors是一种可以在编译时以声明方式替换原有应用的方法. 这种替换是通过让Interceptors声明它拦截的调用的源位置来实现的. 您可以使用拦截器作为源生成器的一部分进行修改 ...

  7. Three.js实现可透视的水面效果

    1. 引言 Three.js是著名的JavaScript 3D图形库,用于浏览器中开发 3D 交互场景的 JS 引擎,可以快速的搭建三维场景 Three.js官网为:创建一个场景 – three.js ...

  8. 记录--基于css3写出的流光登录（注释超详细！）

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 完整效果 对基本的表单样式进行设置 这里设置了基本的表单样式,外层用了div进行包裹,重点是运用了两个i元素在后期通过css样式勾画出一条 ...

  9. 痞子衡嵌入式：给i.MXRT1xxx系列GPIO提早供电会影响DCDC_PSWITCH上电时序导致内部DCDC启动失败

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是给i.MXRT1xxx系列GPIO提早供电会影响DCDC_PSWITCH上电时序导致内部DCDC启动失败. 最近有一个 RW612 产品 ...

  10. WebRTC开源框架

    1.什么是WebRTC WebRTC (Web Real-Time Communications)是一项实时通讯的技术,旨在使得浏览器能为实时通信提供简单的JavaScript接口,让浏览器通过JS实 ...