只要设了 display:inline-block  将元素变成行级块元素的时候,会自带空隙,即使你设了 margin 和 padding 依然没有效果!

  解决办法:只要在父元素上加上font-size:0 就好了,

  -webkit-box-orient:     水平排列 或 垂直排列   (在子元素上进行操作)(前提:父元素为弹性父级 , 使用时加前缀);

    属性值:horizontal   从左到右水平排列;

        vertical  从上到下垂直排列;

  -webkit-line-clamp:是一个不规范的属性 ,还不在css的草案中 :显示块级元素显示的文本行数;(使用时加前缀)

    属性值:数字

  父元素设margin,第一个子元素margin-top不起作用?

    原因:可能把第一个子元素当成相邻的元素   从而产生margin塌陷;

    解决:改变子元素性质为行级块元素

inline-block的间隙问题 box-orient属性 line-clamp属性 margin问题的更多相关文章

  1. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  2. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  3. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  4. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  5. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  6. css属性(常用属性整理)

    摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改.希望对大家有帮助! CSS属性 CSS属性 1 1. css颜色属性 ...

  7. CSS属性:定位属性(图文详解)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...

  8. css 08-CSS属性:定位属性

    08-CSS属性:定位属性 CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. position: absolute; <!-- 绝对定位 --> position: relat ...

  9. HTML 标准属性 和 事件属性

    HTML的公共属性 HTML 和 XHTML 标签支持的标准属性 核心属性 (Core Attributes) 以下标签不提供下面的属性:base.head.html.meta.param.scrip ...

  10. CSS3 box-flex属性和box-orient属性

    比较有意思的是虽然目前没有浏览器支持box-flex,box-orient属性,但CSS3问世以来,这两个属性却一直很火.2014年阿里校招第5题要求使用CSS3中的功能实现三个矩形的布局,总的宽度为 ...

随机推荐

  1. 关于微信授权和unionid 的获取思路。

    1.首先根据appid 获取到预授权码的code string Appid = "******";//appid.由于网页授权与js-jdk使用不同微信,所以暂时独立于此处. st ...

  2. nginx-->基本使用

    Nginx基本使用   一.下载 http://nginx.org/en/download.html 二.解压文件 在当前文件夹下通过终端就可以操作nginx nginx -v 三.配置详解 #use ...

  3. 20191105 《Spring5高级编程》笔记-第16章

    第16章 Web应用程序 16.3 MVC和Spring MVC介绍 16.3.3 Spring MVC WebApplicationContext层次结构 在Spring MVC中,Dispatch ...

  4. string类find_first_not_of ()方法

    string类find_first_not_of ()方法 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://xfqxj.blog. ...

  5. web 前端1 html5基础

    HTML web sockent 实例 import socket def handle_request(client): buf = client.recv(1024) client.sendall ...

  6. C语言第七周作业

    每个单词的最后一个字母改成大写 函数fun的功能是:将p所指字符串中每个单词的最后一个字母改成大写.(这里的"单词"是指由空格隔开的字符串). 函数接口定义: void fun( ...

  7. Leetcode Lect4 二叉树中的分治法与遍历法

    在这一章节的学习中,我们将要学习一个数据结构——二叉树(Binary Tree),和基于二叉树上的搜索算法. 在二叉树的搜索中,我们主要使用了分治法(Divide Conquer)来解决大部分的问题. ...

  8. Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD

    原文:Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链 ...

  9. CentOS7搭建Docker镜像实战

    开发十年,就只剩下这套架构体系了! >>>   一.搭建环境 使用的是VMWare 12虚拟机安装的CentOS7 安装成功后修改ip: 1. ip addr查看相关信息: 2. 修 ...

  10. ReactiveCocoa详解

    最近看了大神的博客后,感觉该对ReactiveCocoa做一个了断了. 首先大致的对以下关于ReactiveCocoa内容做一个简单的总结,其他的后续更新 1.ReactiveCocoa的操作思想 2 ...