div 配搭 display:inline-block

以下代码会出现这样的情况

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><link href="css/fontsStyle.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function add(){var group = $('.group');group.append('<div class="imageContainer"></div>');}</script></head><body><input type="button" onclick="add()" value="add"><div class="group"><div class="imageContainer" ></div><div class="imageContainer" ></div><div class="imageContainer" ></div></div></body><style>.group{/* border-radius: 6px; */border:1px solid green;width: 800px;height: 800px;/* padding: 10px; *//* letter-spacing: -6px; */}.imageContainer{/* border-radius: 6px; */border:1px solid green;width: 148px;height: 148px;/* margin-left: 8px;margin-top: 8px; */display:inline-block;}</style></html>

这里会出现两种情况，1.就是代码里面手动添加的，两个div之间存有空隙，2.是通过函数添加的，没有带空隙

为什么会出1的情况呢？这就是因为div被添加时，默认给了一个空格，那个怎样消除这个空格呢？在网上找到了4种方法，这里就不一一介绍了，因为其中3种都是不太好的方法，所以这里就介绍其中一个种不叫多人使用的，就在最外层容器种，就是group中添加一个css, letter-spacing: -6px; 这个就是字体与字体之间的空隙，这里的空隙大小是6px，这个要根据实际使用的过程中字体的样式来决定空隙是去多大一般都是4px

转载于:https://www.cnblogs.com/oscar1987121/p/7388007.html

div 配搭 display:inline-block相关推荐

[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
[DIV+CSS应用]澄清display:inline;与float:left;的用途
首先我们要明确,display:inline;与float:left;正确含义.display:inline;(内联)<CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素. ...
display:inline display:block
display:inline; 元素会被显示为内联元素,元素前后没有换行符. display:block 元素将显示为块级元素,此元素前后会带有换行符. 举例: 1.display:block < ...
display:inline的用法
<div> DIV1 </div> <div> DIV2 </div> 这里DIV1和DIV2分别占一行,但是你给他们加上属性后变了 <div ...
DIV CSS display (block none inline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...

div 配搭 display:inline-block

div 配搭 display:inline-block相关推荐

最新文章

热门文章