div设置为inline-block后,两个div之间有空隙

一. 问题: 如题所描述,div设置为inline-block后,产生如下现象:

二. 解决办法:

  1. div之间不要换行不要留空格,写成这种:
<div class="parent">
        <div class="left">左侧</div><div class="right">右侧</div>
</div>
  1. 父元素的font-size:0;再给子div设置一个font-size
        .parent {
            font-size: 0px;
        }

        .left,
        .right {
            display: inline-block;
            font-size: 14px;
        }

三. 原因

出现空隙是因为div标签设为行内块级元素后代码里的换行被浏览器当成一个空格来解析

原文地址:https://www.cnblogs.com/XHappyness/p/12530700.html

时间: 2024-11-08 14:01:25

div设置为inline-block后,两个div之间有空隙的相关文章

iOS开发:使用Block在两个界面之间传值(Block高级用法:Block传值)

使用Block的地方很多,其中传值只是其中的一小部分,下面介绍Block在两个界面之间的传值: 先说一下思想: 首先,创建两个视图控制器,在第一个视图控制器中创建一个UILabel和一个UIButton,其中UILabel是为了显示第二个视图控制器传过来的字符串,UIButton是为了push到第二个界面. 第二个界面的只有一个UITextField,是为了输入文字,当输入文字,并且返回第一个界面的时候,当第二个视图将要消失的时候,就将第二个界面上TextFiled中的文字传给第一个界面,并且显

在reset css后两个input之间还是出现默认间隔的问题。

<div class="search_box fl"> <input type="text" class="search_text" /> <input type="button" class="search_btn" value="搜 索" /> </div> 将上面这种写法换成下面这种写法即可解决问题 <div class=&qu

【css面试题】三个DIV要求水平对齐,左右两个DIV宽度固定为100px,中间那个DIV充满剩余的宽度(至少2种方法)

这是我在一家公司面试时遇到的问题,当时没有答上来!! 所以看到的小伙伴一定要注意了!! 变化浏览器宽度可看到效果: 左 右 中 然后我们来看看代码: 第一种方法:(浮动) <style type="text/css"> .left,.right,.center{ border:1px solid; height:100px; text-align: center; line-height:100px; font-size:50px; } .left{ float:left;

使用block实现两个页面之间的传统价值观

第二个view声明一个block属性: @property (nonatomic, copy) void(^doTransferMsg)(NSString *_msg); 然后传值方法里检查block是不是存在 - (IBAction)transferText:(UIButton *)sender { if (_doTransferMsg) { _doTransferMsg(@"hello there"); _doTransferMsg = nil; } [self.navigatio

css如何实现让两个div在同一行排列

css如何实现让两个div在同一行排列:让两个div元素在同一行排列是基本的操作,实现也非常的简单,可能会对初学者有所帮助.一.使用功能浮动方式:代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

关于内层DIV设置margin-top不起作用的解决方案

关于内层DIV设置margin-top不起作用的解决方案 (一) 近日在做另外一个站点的时候,又遇到这个问题,决定好好的研究解决一下. 代码如下: <div>上部层</div> <div> <!--父层-->     <div style="margin-top:200px;">子层</div></div> 理想中的效果是父层和上部层贴边显示,子层距离父层顶部有200px的距离,在ie中正常,但是在ff

《转》关于内层DIV设置margin-top不起作用的解决方案

关于内层DIV设置margin-top不起作用的解决方案 (一) 近日在做另外一个站点的时候,又遇到这个问题,决定好好的研究解决一下. 代码如下: <div>上部层</div> <div> <!--父层-->     <div style="margin-top:200px;">子层</div></div> 理想中的效果是父层和上部层贴边显示,子层距离父层顶部有200px的距离,在ie中正常,但是在ff

如何实现两个div等高效果

如何实现两个div等高效果:在网页实际应用中,可能需要动态的实现两个div的等高效果,当然不仅限于div,例如一个网页分为左右两栏,一栏的高度可能需要根据内容自适应,也就是说高度不是固定的,而另一栏需要和它保持高度一致,那么就需要动态的设置高度.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse

原生DIV,控制两个DIV显示隐藏切换,且切换后样式形状不乱

功能:做项目时候经常需要设置两个DIV显示或者隐藏,切换显示,并且保证之前设置的样式不乱: 实现: 保证样式不乱的方法是:先进行有关数据渲染的操作,最后再执行隐藏和显示的操作,这样数据已经填充好了,样式就不会乱了. 一.方式1:隐藏后仍占有页面空间,显示空白 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;"document.getElementById("typediv1").styl