一.实现分隔线的方法(未理解:不是说span元素垂直方向设置怕padding不影响吗?)

html:

 <div>
登陆<span></span>注册
</div>

css:

 .span{
padding: 12px 6px 1px;/*这里通过改变第一个参数和第三个参数可以调节风隔线的的上下高度,分别是padding-top和padding-bottom*/
margin-left:12px;
border-left:2px solid #000;
font-size:;
}

实现原理:打开chrome浏览器开发者工具进行盒子模型的查看。

图1:将span标签的margin-left设置为12px,对应效果如图1。

图2:为使分隔线左右两边空白对称,这里将span的padding-left和padding-right都设置为6px,因为span中没有内容,所以加起来一共是12px,与margin-left相同。

图3:定义span元素的左边框作为分割线。

图4:至此,通过调节padding-top和padding-bottom,来撑大或是减少盒子的整体高度,以此来调节分隔线。

Tips_利用padding实现高度可控的分隔线的更多相关文章

  1. 内联元素padding与高度可控的分隔线实例页面

    html: <a href="">登录</a><a href="">注册</a> css: a + a:befo ...

  2. 使用padding代替高度实现背景图片高度按比例自适应

    本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionat ...

  3. CSS实现自适应分隔线的N种方法

    分割线是网页中比较常见的一类设计了,比如说知乎的更多回答 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应 偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了 心想 ...

  4. 【转】CSS实现自适应分隔线的N种方法

    1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的 ...

  5. 巧用CSS实现分隔线

    下面是几种简单实现分隔线的方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法. 单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padd ...

  6. CSS巧妙实现分隔线的几种方法

    单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: ...

  7. css巧妙实现分隔线

    单个标签实现分隔线 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px sol ...

  8. 文字在线中间,CSS巧妙实现分隔线的几种方法

    单个标签实现分隔线: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px so ...

  9. 给自定义cell设置分隔线的不同做法

    1.给cell添加一个UIView,设置UIView的高度为1,并设置这个UIView的左.下.右约束. 2.不需要给cell添加任何控件,重写cell的- (void)setFrame:(CGRec ...

随机推荐

  1. mongodb3.6集群搭建:分片+副本集

    mongodb是最常用的noSql数据库,在数据库排名中已经上升到了前五.这篇文章介绍如何搭建高可用的mongodb(分片+副本)集群. 在搭建集群之前,需要首先了解几个概念:路由,分片.副本集.配置 ...

  2. golang命令行库cobra使用

    github地址:https://github.com/spf13/cobra Cobra功能 简单子命令cli 如  kubectl verion    kubectl get 自动识别-h,--h ...

  3. 第一节:框架前期准备篇之Log4Net日志详解

    一. Log4Net简介 Log4net是从Java中的Log4j迁移过来的一个.Net版的开源日志框架,它的功能很强大,可以将日志分为不同的等级,以不同的格式输出到不同的存储介质中,比如:数据库.t ...

  4. 利用pyinstaller 打包Python文件

    1.下载安装pyinstaller模块 cmd 命令: pip install pyinstaller cmd命令: pip list 查看自己安装的模块 2.建议把要大包的Python文件单独放到新 ...

  5. 迅为iTOP-4418/6818开发板-驱动-IO初始化配置介绍和例程

    对于所有的处理器,pad 一般可以分为两大类:IO(输入输出).Power(VDD 和GDD).类似摄像头 IO.以太网 IO.PWM 的 IO 等等,都可以统称为 IO.一个 IO,有可能能够被配置 ...

  6. C# - Visual Studio简明操作

    Visual Studio简明操作 安装Northwind示例数据库 运行安装程序,结束安装后,再CMD中输入以下命令 cd C:\SQL Server  Sample Databases(回车) s ...

  7. 关于模拟I2C的一些问题???

    1.在调试BH1750时发现stm32f103rb单片机用模拟I2C通讯时引脚使用开漏模式能正常读出来数据,使用推挽模式则完全无法通讯,发送地址后从机没有应答? https://blog.csdn.n ...

  8. 不用写代码的框架 - RobotFramework+Eclispe环境安装篇

    环境安装是学习任何一个新东西的第一步,这一步没走舒坦,那后面就没有心情走下去了. 引用名句:工欲善其事必先利其器!! Robotframework:一款 自动化测试框架. Eclipse:一款编辑工具 ...

  9. Shell 基础教程

    一个比较好的shell基础教程: http://www.runoob.com/linux/linux-shell.html

  10. HTML5 图片下载

    1. 概述 1.1 说明 在项目过程中,有时候需要下载某一展示图片,html5中定义了<a> download属性,download属性规定被下载的超链接目标,该属性可以设置一个值来规定下 ...