在html调节元素左右间距,HTML元素间距问题

在利用CSS布局时，经常会遇到一些没有定义间距padding、margin之类的内容，但是页面上却总会有一些不知从何而来的间距出现，下面就是我在自己的工作中遇到的一些常见情况的总结，及其消除方法。

1.并排div之间的间距。

多个div元素在定义属性：display:inline-block;后，多个div元素之间并排排列，但是它们之间总是隔着那么几像素的距离，即便你一次又一次修改自己的padding、margin设置为0，都没办法取消。

它们之间存在的间距，是因为不同div之间存在默认间距，因为写代码的习惯，一个div元素结束之后，我们总会换行开始写代码，这一换行就是div之间存在间距的原因。

所以解决办法很简单，a.去掉代码上不同div元素之间的换行或者空格即可，这个方法在代码可读性上有些不可取。如果你对代码格式有很严格的限制，像我一样是个无可救药的强迫症，你就选择下面的方法吧。b.利用注释将div之间的空格标记起来。c.网上还有人提到过一种解决方案，将margin设置为负值，这个方法也是可行的，但是由于浏览器之间的标准差异，margin的设置可能会需要在不同浏览器中设置为不同的值，增加了工作的复杂度。

this is div 1.

在html调节元素左右间距,HTML元素间距问题相关推荐

css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
css 块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签,如:div.p.ul.li.h ...
CSS中的块元素,内联元素,内联块元素
块元素,内联元素,内联块元素元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素块元素,也可以称为行元素,布局中常用的标签如: ...
块元素、行内元素、行内块元素
一.块元素 block element 块元素的特性独霸一行,总是在新行上开始宽度缺省是它父级元素的100%,除非设定一个宽度高度.行高.外边距.内边距都可以设置可以容纳其他内联元素或者其他块 ...
css怎么将块元素变成,CSS块元素、行内元素、行内块元素的转换
一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...
html中哪个属性表示块级元素,HTML块级元素与行级元素
转自:http://gkecenter.blog.163.com/blog/static/181380305201291745234195/ 一.两种类型 HTML中的大部分元素都可分为两种类型:块级 ...
css块级元素拉伸,CSS布局之块级元素、块级元素和行内块元素
元素有行内元素(inline).块级元素(block)以及行内块元素(inline-block)之分,对应地它们之间的盒模型也会有不同. 1. 行内元素(inline) 通过display: inli ...
css块元素,内联元素,内联块元素
一.块元素,内联元素,内联块元素 1.块元素: 也称行元素, 布局中常用的标签如:div,p, h1-h6,ul,li... 支持全部的样式可以设置元素的大小,并且元素是独占一行显示,如果 ...
css笔记（选择器+清除浮动+定位+margin叠加以及子元素margin对父元素拖拽+羽化阴影）
##css(Cascading Style Sheet) 1.样式引入行内样式:优点--效率高: 缺点--html与css代码耦合,复用性低内部样式表:优点--解决css和html代码耦合: 缺点- ...
玩转CSS中块元素、内联元素、内联块元素
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 1.块元素块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li. ...

在html调节元素左右间距,HTML元素间距问题

在html调节元素左右间距,HTML元素间距问题相关推荐

最新文章

热门文章