bootstrap4 调整元素之间距离
影响元素之间的间距是可以通过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 调整元素之间距离的更多相关文章
- css margin-top设置html元素之间的距离
css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...
- 行内块inline-block元素之间出现空白间隙原因及解决办法
首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...
- 清除inline-block元素之间的空白
一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...
- html iframe 元素之间的调用
html iframe 元素之间的调用一.简介 一般需要引入一个独立页面的时候,我们会使用iframe.在业务需要的时候,我们需要在父页面与iframe页面之间进行交互.交互的时候,我们就需要使 用到 ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS HACK tab制表符导致行内元素之间的空隙如何解决
<!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...
- C#面向对象思想计算两点之间距离
题目为计算两点之间距离. 面向过程的思维方式,两点的横坐标之差,纵坐标之差,平方求和,再开跟,得到两点之间距离. using System; using System.Collections.Gene ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- 清除行内元素之间HTML空白的几种解决方案
行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...
随机推荐
- FreeIPA ACI (Access Control Instructions) 访问控制说明
目录 FreeIPA ACI (Access Control Instructions) 访问控制说明 一.ACI 位置 二.ACI 结构 三.ACI 局限性 四.复制拓扑中的ACI 五.操作ACI ...
- JVM命令jps
jps是JVM的一个常用命令,类似linux中的ps命令.jps是查看java进程信息的命令:ps是查看linux系统中进程的命令 格式 jps [ options ] [ host ...
- LVS Nginx和HAproxy的区别,怎么选择最好
LVS Nginx和HAproxy有什么区别呢? LVS:Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统. Nginx:Nginx是一款轻量级的w ...
- 51nod 1989 竞赛表格 (爆搜+DP算方案)
题意 自己看 分析 其实统计出现次数与出现在矩阵的那个位置无关.所以我们定义f(i)f(i)f(i)表示iii的出现次数.那么就有转移方程式f(i)=1+∑j+rev(j)=if(j)f(i)=1+\ ...
- HDU 6070 - Dirt Ratio | 2017 Multi-University Training Contest 4
比赛时会错题意+不知道怎么线段树维护分数- - 思路来自题解 /* HDU 6070 - Dirt Ratio [ 二分,线段树 ] | 2017 Multi-University Training ...
- HDU 6042 - Journey with Knapsack | 2017 Multi-University Training Contest 1
/* HDU 6042 - Journey with Knapsack [ 生成函数,五边形定理 ] | 2017 Multi-University Training Contest 1 题意: n种 ...
- mysql 指令
// 授予用户某些权限GRANT ALL ON *.* TO 'USER'@'HOST';// 进入mysql访问特定数据库mysql -u user -p database_name// 查看数据表 ...
- springboot的@Configuration文件读取static静态文件
错误 正确
- CentOS重新安装yum
1.问题描述 有时会出现yum不可用的错误,可以先卸载再重装. 2.操作步骤 (1).下载Python-iniparse-0.4 -9.el7.noarch.rpm (2).下载yum-3.4. ...
- hive-server 启动失败问题小记
Unable to instantiate using constructor(MetricRegistry, HiveC onf) for reporter org.apache.hadoop.hi ...