div 空隙的解决办法

div在用display: inline-block;时会出现莫名的空隙，

后来发现时标签后空格惹的祸

    <style>* {margin: 0;padding: 0;}   div {display: block;width: 100px;height: 100px;margin: 0;padding: 0;border: 1px solid blue;}.div {display: inline;}</style>
</head>
<body><div></div><div></div><div></div><div></div>
</body>

解决办法

第一种：
消除潜在的空格

    <style>* {margin: 0;padding: 0;}   div {display: block;width: 100px;height: 100px;margin: 0;padding: 0;border: 1px solid blue;}.div {display: inline;}</style>
</head>
<body><div></div><div></div><div></div><div></div>
</body>

第二种
在父元素中设置 font-size:0;

    <style>* {margin: 0;padding: 0;}  body {font-size: 0;}div {display: inline-block;width: 100px;height: 100px;margin: 0;padding: 0;border: 1px solid blue;}.div {display: inline;}</style>
</head>
<body><div></div><div></div><div></div><div></div>
</body>

完成，

div 空隙的解决办法相关推荐

html ul超出div,解决ul宽度超出div宽度常用解决办法
有朋友问我ul宽度超出div宽度怎么办呢?这个问题对于我们很多初学者来讲是不知道怎么办的,下面一起来看看解决办法吧．在设计网页的时候,有时候会遇到ul超出div宽度,遇到这种宽度超出宽度的时候, ...
HTML里子DIV设置margin-top后影响父DIV位置的解决办法
在HTML里,子DIV元素设置了margin-top后,在与父元素之间没有任何其他元素的情况下,会影响到父DIV的位置. 一.编写代码. <!DOCTYPE html> <html ...
element-ui表格的头部border有空隙的解决办法
在app.vue中的style中写上样式 .tableContent{padding: 20px !important;background: #ffffff;margin-top: 20px; } ...
html css div 高度自适应,HTML/CSS中，DIV高度自适应解决办法
获取content高度 *{color:#fff} .header{ height: 40px; width:100%; position: fixed; top:0; left:0; backgro ...
div背景图片或颜色不显示的解决办法
背景图片不显示的原因主要有以下几个方面: 1. css没有被调用 2. css图片地址不对 3. div的高度没有固定,是auto.没有设值或者高度不够 4. div被嵌套 5. div代码不规范解 ...
当li设置为inline-block之后元素之间空隙的产生原因和解决办法
当我们在使用ul>li标签写导航的时候,又不想让其变成浮动流,我们只需要把li的css样式添加一个display: inline-block就可以了. 但是当我们写完样式之后,本来应该是这样的. ...
DIV中文字不换行解决办法
解决办法如下: word-wrap : normal | break-word 设置或检索当当前行超过指定容器的边界时是否断开转行. normal: 控制连续文本换行. break-word: 内容将 ...
div隐藏select显示的解决办法(就死select挡住了div) 不是网上找到的那五种
在网上找到的解决办法地址如下 http://www.blogjava.net/fine/archive/2007/08/07/134941.html 又想到了一种新的解决办法,是试出来的(准确点说是看 ...
【Css】使用float:left浮动后，导致后面div高度“塌陷”的解决办法（示例和图示）
正确的样式:在父元素中增加一条:overflow:hidden; 错误的样式: 上图,当"精选推荐"的span使用float:left后,后面的div线顶上去了. 解决办法: 在父 ...
使用hover给div加边框，出现div晃动和页面布局发生混乱的解决办法
** 使用hover给div加边框,出现div晃动和页面布局发生混乱的原因: 因为给div设置的border的宽度,使得div的宽度增加,撑开了其他的div 解决办法: (1)在给div设置hover ...

div 空隙的解决办法

div 空隙的解决办法

div 空隙的解决办法相关推荐

最新文章

热门文章