最近在做界面,出现了如下问题:
可以看出,图中圈出来的就是问题所在,左右两边和下面是不对齐的,而bootstrap代码中,全部都是12个栅格:
<div class = "col-md-12 col-sm-12 col-lg-12">
<span style="white-space:pre"> </span><img alt="" src="/EVM/img/sac_jietu14.jpg" style = " width:100%">
</div>
所以,经同学提醒,知道了问题所在,就是元素的内边距padding属性的设置出了问题。
下面给出padding的相关介绍。
padding是CSS中的一个属性,用来设置元素的内边距,这里的内边距包括四个方面的边距:上下边距、左右边距。
1、四个参数
eg: padding:10px 5px 10px 12px;
- 上内边距是10px;
- 右内边距是5px;
- 下内边距是10px;
- 左内边距是12px.
四个参数情况下的顺序是顺时针方向,即上、右、下、左。
2、三个参数
eg: padding: 10px 12px 20px;
- 上内边距是10px;
- 左右内边距是12px;
- 下内边距是20px;
3、两个参数
eg: padding: 12px 23px;
4、一个参数
eg: padding: 10px;
5、padding基础:
- 默认值:0px;
- 继承性:no;
- 版本:CSS1;
- js语法:object.style.padding = "10px 20px"; (上下10px,左右20px)
所以,在上述代码的div中加入style = "padding:0px"就可以解决问题。
<div class = "col-md-12 col-sm-12 col-lg-12" style="padding:0px">
<img alt="" src="/EVM/img/sac_jietu14.jpg" style = " width:100%">
</div>
上面用红线标注出来的就是没有加入 style = "padding:0px";时的div内边距情况。可看出左右两边都是有空隙的,但是上下是没有空隙的,所以加入style="padding: 0px";就可以保证4个内边距都是0px。
而对于margin,是指的元素的内边距,其用法和padding相似。
分享到:
相关推荐
padding和margin区别 padding和margin区别 padding和margin区别padding和margin区别
这个一个CSS padding和margin的例子,对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;width:400px;margin-left:15px; padding-left:35px;} .box2 { margin-left:10px; padding-left:15px; width:300px...
本文从语法结构、可能取的值、浏览器兼容问题等方面为大家介绍下padding和margin的异同点另附截图,有想学习的朋友可以参考下哈,希望对大家有所帮助
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。下面讲解 padding和margin常用的用法
各浏览器padding、margin的差异
HTML中padding和margin的区别,包括代码和详解,代码直接可用
主要介绍了关于ol和ul的padding和margin默认值,需要的朋友可以参考下
有关默认元素在不同浏览器中的margin值是多少的问题,接下来与大家共同探讨下,希望下面提供的数值对你在浏览器兼容性测试时会有所帮助
Class与ID区别 margin和padding区别 CSS学习笔记
主要介绍了Android中gravity、layout_gravity、padding、margin的区别小结,需要的朋友可以参考下
主要介绍了css行内元素设置padding,margin,width,height没有变化的解决方法,需要的朋友可以参考下
不知道大家有没有遇到过这种情况,在设置了元素宽度width100%后再加上margin和padding超出父元素宽度,其实解决的方法很简单,直接使用CSS的 box-sizing 属性就可以解决这个问题,这个是CSS3新属性,可以将padding...
CSS代码简化在工作中是非常有益的,也是必要的。在编写CSS代码时,经常会出现冗余的代码,为了提高代码的质量及文件压缩到最小,使代码具有可读性,不得不把CSS代码简化。