关于去除2个inline-block之间的间距

今天要做 这种效果的图。我是用span做的 图文与图文按钮。因为行内元素没有width与height,(虽然可以用padding撑大),本人更喜欢用width与height。于是用了display:inline-block将span变为行内块级元素。之后两个span之间出现了一些间距。谷歌了一下找到了一些方法。https://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements这里提供了4种方法。我用了其中两种可行,记录一下,加强记忆吧。

1.对左边的span加margin-right:-4px(原博客中说是2个inline-block之间的间距是4px)。可行。

2.对2个span的父盒子加font-size:0;再对这两个span分别设置字号。可行。

再记录一下今天遇到的一个问题:

一个大盒子div-parent与屏幕同宽,两个子盒子:div-left与div-right,两个子盒子按比例分父亲的width,div-left左浮动,div-right右浮动。当浏览器页面缩小之后,div-right掉下去了。挣扎了许久,给div-parent设置了min-width之后,就可以缩放浏览器页面了。我也很奇怪,暂时还没有找到满意且理解的答案。后续更新。

时间: 2024-10-20 15:55:33

关于去除2个inline-block之间的间距的相关文章

去除行内(inline/inline-block)元素之间的间距

先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { display: inline; background: #f00; } .inline-0f0 { display: inline; background: #0f0; } .inline-block-00f { display: inline-block; background: #00f; } .inline-bl

如何去除内联元素(inline-block元素)之间的间距(转载)

如何去除内联元素(inline-block元素)之间的间距 前几天写一个专题页 div{width:900px;}div a{ display:inline-block; width:300px;}<div>    <a href=""></a>    <a href=""></a>    <a href=""></a></div> 发现这个900的容

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

Android PullToRefreshListView设置各个item之间的间距

要设置第三方的上拉下载listView的item之间的间距,可以在xml布局文件中的listView节点中设置xml的属性即可: android:divider="#00000000" android:dividerHeight="10dp" 但是在java代码中动态设置确不起作用,这个问题目前我还在研究中,有知道的大神可以回答一下,互相交流学习一下! mListView.setDividerPadding(10);

请问GridView中 两个图片之间的间距是如何设置的

android:columnWidth设置列的宽度.关联的方法为:setColumnWidth(int) android:gravity设置此组件中的内容在组件中的位置.可选的值有:top.bottom.left.right.center_vertical.fill_vertical.center_horizontal.fill_horizontal.center.fill.clip_vertical 可以多选,用“|”分开.关联方法:setGravity (int gravity) andro

CSS如何设置英文字母之间的间距

CSS如何设置英文字母之间的间距: 在之前章节中已经介绍过如何使用CSS控制字的间距,下面再介绍一下如何控制英文字母之间的间距.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>

关于 inline block 元素之间的空格

本篇文章由:http://xinpure.com/about-the-inline-block-element-between-spaces/ 说点什么 display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的... 最简单的方法就是把 inline-block 元素之间的回车删除,就是代码显示有点不美观,影响阅读. 方法总结 以下方法不保证浏览器兼容性问

inline block inline-block总结

一.block表示块级元素,其元素通常会单独成一块,独占一行: 二.inline表示内联元素,不会产生换行,其排版会在一行显示,直到一行被占满. 三.常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等:常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR        等. 四.一般使用display:block与display:inline来改变元素的

inline,block,inline-block解析

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是:  和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图