影响元素之间的间距是可以通过style的margin或padding属性来实现,但这两个属性本意并不相同;margin影响的是本元素与相邻外界元素之间的距离,这里简称外边距;padding影响的元素本身与其内部子元素之间的距离,简称为内填充。

bootstrap4提供了简写的class名,名称分别以m-开头和p-开头的类。

一、影响距离大小的值有

0,1,2,3,4,5,auto

(1)、margin值有

class名

等价的style

m-0

等价于{margin:0 !important}

m-1

等价于{margin:0.25rem !important}

m-2

等价于{margin:0.5rem !important}

m-3

等价于{margin:1rem !important}

m-4

等价于{margin:1.5rem !important}

m-5

等价于{margin:3rem !important}

m-auto

等价于{margin:auto !important}

(2)、padding值有

class名

等价的style

p-0

等价于{padding:0 !important}

p-1

等价于{padding:0.25rem !important}

p-2

等价于{padding:0.5rem !important}

p-3

等价于{padding:1rem !important}

p-4

等价于{padding:1.5rem !important}

p-5

等价于{padding:3rem !important}

p-auto

等价于{padding:auto !important}

二、调整某一侧的边距

有几个缩写,t,b,l,r,x,y含义分别是top,bottom,left,right,left和right,top和bottom

(1)、margin例子,距离大小可以0-5与auto,这里只用期中一个值来说明含义

class名

等价的style

mt-2

{margin-top: 0.5rem !important}

mb-2

{margin-bottom: 0.5rem !important}

ml-2

{margin-left: 0.5rem !important}

mr-2

{margin-right: 0.5rem !important}

mx-2

{margin-right: 0.5rem !important;margin-left: 0.5rem !important}

my-2

{margin-top: 0.5rem !important;margin-bottom: 0.5rem !important}

(2)padding例子

class名

等价的style

pt-2

{padding-top: 0.5rem !important}

pb-2

{padding-bottom: 0.5rem !important}

pl-2

{padding-left: 0.5rem !important}

pr-2

{padding-right: 0.5rem !important}

px-2

{padding-right: 0.5rem !important;margin-left: 0.5rem !important}

py-2

{padding-top: 0.5rem !important;margin-bottom: 0.5rem !important}
---------------------
作者:王建野
来源:CSDN
原文:https://blog.csdn.net/jianye5461/article/details/79463014
版权声明:本文为博主原创文章,转载请附上博文链接!

bootstrap4 调整元素之间距离的更多相关文章

  1. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

  2. 行内块inline-block元素之间出现空白间隙原因及解决办法

    首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...

  3. 清除inline-block元素之间的空白

    一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...

  4. html iframe 元素之间的调用

    html iframe 元素之间的调用一.简介 一般需要引入一个独立页面的时候,我们会使用iframe.在业务需要的时候,我们需要在父页面与iframe页面之间进行交互.交互的时候,我们就需要使 用到 ...

  5. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  6. CSS HACK tab制表符导致行内元素之间的空隙如何解决

    <!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...

  7. C#面向对象思想计算两点之间距离

    题目为计算两点之间距离. 面向过程的思维方式,两点的横坐标之差,纵坐标之差,平方求和,再开跟,得到两点之间距离. using System; using System.Collections.Gene ...

  8. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  9. 清除行内元素之间HTML空白的几种解决方案

    行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...

随机推荐

  1. FreeIPA ACI (Access Control Instructions) 访问控制说明

    目录 FreeIPA ACI (Access Control Instructions) 访问控制说明 一.ACI 位置 二.ACI 结构 三.ACI 局限性 四.复制拓扑中的ACI 五.操作ACI ...

  2. JVM命令jps

      jps是JVM的一个常用命令,类似linux中的ps命令.jps是查看java进程信息的命令:ps是查看linux系统中进程的命令   格式      jps [ options ] [ host ...

  3. LVS Nginx和HAproxy的区别,怎么选择最好

    LVS Nginx和HAproxy有什么区别呢? LVS:Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统. Nginx:Nginx是一款轻量级的w ...

  4. 51nod 1989 竞赛表格 (爆搜+DP算方案)

    题意 自己看 分析 其实统计出现次数与出现在矩阵的那个位置无关.所以我们定义f(i)f(i)f(i)表示iii的出现次数.那么就有转移方程式f(i)=1+∑j+rev(j)=if(j)f(i)=1+\ ...

  5. HDU 6070 - Dirt Ratio | 2017 Multi-University Training Contest 4

    比赛时会错题意+不知道怎么线段树维护分数- - 思路来自题解 /* HDU 6070 - Dirt Ratio [ 二分,线段树 ] | 2017 Multi-University Training ...

  6. HDU 6042 - Journey with Knapsack | 2017 Multi-University Training Contest 1

    /* HDU 6042 - Journey with Knapsack [ 生成函数,五边形定理 ] | 2017 Multi-University Training Contest 1 题意: n种 ...

  7. mysql 指令

    // 授予用户某些权限GRANT ALL ON *.* TO 'USER'@'HOST';// 进入mysql访问特定数据库mysql -u user -p database_name// 查看数据表 ...

  8. springboot的@Configuration文件读取static静态文件

    错误 正确

  9. CentOS重新安装yum

    1.问题描述    有时会出现yum不可用的错误,可以先卸载再重装. 2.操作步骤 (1).下载Python-iniparse-0.4 -9.el7.noarch.rpm (2).下载yum-3.4. ...

  10. hive-server 启动失败问题小记

    Unable to instantiate using constructor(MetricRegistry, HiveC onf) for reporter org.apache.hadoop.hi ...