bootstrap4 调整元素之间距离
https://blog.csdn.net/jianye5461/article/details/79463014
影响元素之间的间距是可以通过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}
转载于:https://blog.51cto.com/maplebb/2308042
bootstrap4 调整元素之间距离相关推荐
- bootstrap4 调整元素之间距离 margin 和padding
响元素之间的间距是可以通过style的margin或padding属性来实现,但这两个属性本意并不相同:margin影响的是本元素与相邻外界元素之间的距离,这里简称外边距:padding影响的元素本身 ...
- bootstrap4 利用m- p-调整元素之间距离
转自bootstrap4 调整元素之间距离 感谢原作者! 影响元素之间的间距是可以通过style的margin或padding属性来实现,但这两个属性本意并不相同:margin影响的是本元素与相邻外界 ...
- css margin-top设置html元素之间的距离
css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...
- 十一届蓝桥模拟赛 元素之间最大的元素距离 JAVA
问题描述 在数列 a_1, a_2, -, a_n中,定义两个元素 a_i 和 a_j 的距离为 |i-j|+|a_i-a_j|,即元素下标的距离加上元素值的差的绝对值,其中 |x| 表示 x 的绝对 ...
- 调整Word字与字之间距离
调整Word字与字之间距离 选中所要调整的文字,并点击此处 1.第一种调整方式 选择:调整宽度并调整新文字宽度 2.第二种调整方式 选择字符缩放,并调整比例 或点击其它 选择间距,选择加宽/紧缩,也可 ...
- html清除内部所有补白,如何清除行内元素之间的HTML空白
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 前言 相信大家应该都遇到过下面这个问题:"HTML源码中行内元素之间的空白显示在了屏幕上".可能大家 ...
- css中如何调整元素位置
我们通常把样式层叠表叫做css,它是用来修饰html内容的,给内容加各种各样的样式和效果. 那么在写实际项目过程中经常会遇到一个普遍性问题:就是调整元素的位置 如果只对于初学编程的人来说,只能用css ...
- 设置弹性框项目之间距离的更好方法
本文翻译自:Better way to set distance between flexbox items To set the minimal distance between flexbox i ...
- js 数组添加n次相同元素_数组中两次出现相同元素之间的最大距离
js 数组添加n次相同元素 Prerequisite: Hashing data structure 先决条件: 哈希数据结构 Problem statement: 问题陈述: Find maximu ...
最新文章
- 前后端分离的探索(二)
- C#计时器,记录程序运行时长
- java float 加法_JAVA 实现精确的加减乘除运算
- 《结对-结对编项目作业名称-开发过程》
- xml验证 java代码,使用Java代码进行XML验证
- SAP HANA中的SLT简介
- 【转载】javascript下ie7,ie8的Date Bug的解决
- cubemx lan8720模块_通过STM32cubeMX将STM32F767+LAN8720+LwIP+FreeRTOS的以太网实现
- spring cloud(九):各组件常用配置参数
- c/c++整理--c++面向对象(1)
- 论文浅尝 | 基于局内去噪和迁移学习的关系抽取
- Unreal Engine 4 C++ UCLASS构造函数易出错分析
- 怎么下载计算机考试准考证
- vue用vue-qart生产二维码
- CYUSB3014 I2C eeprom 启动
- C# 博思得 POSTEK 打印机 打码机 SDK 二次开发 指令打印
- 隐马尔可夫模型(一)概念
- 易优cms地图文件sitemap生成
- logo制作软件 Ai怎么设计创意LOGO
- 压缩软件 WinRAR 去广告
热门文章
- python中enumerate在for循环中用法_python中enumerate的用法实例解析
- linux程序移植到vxworks,VxWorks入门(一):VxWorks Vs Linux
- attiny13a程序实例_ATtiny13A带A新版本
- 两张照片重叠处半透明_全面解读超焦距,让你的风景照片更锐更清晰
- 大连评职称英语计算机,假如 职称英语和中级职称的工商管理、经济基础都考过了,辞职了还有地方给评中级经济师吗?大连的...
- 什么是PCB板上的鼠牙洞?
- 空心磁珠铁氧体抗干扰屏蔽磁环RH磁通高频磁芯圆形穿心磁珠滤波器
- 智能车竞赛研讨会 会议通知
- 强交变磁场下的AD转换数值的变化
- 七分结构三分代码-直立车想节能