垂直栅格与渐进式行距(上)（3）
作者：宗羲 来源：Taobao.com UED Team 发布时间：2009-04-01 18:30:00
标签：设计,栅格系统,垂直,栅格
添加边框
添加边框道理相同，无非要的就是最后要求基线与网格对齐。这里的例子中，我们来给边注加个边框吧。给他加上1px边框(css border)后，还要再加上8px的补白(css padding).细心的同学们一定发现了，为什么补白是8px呢？其实很简单，这就是保证垂直方向上的补白和边框之和，是我们的基础行高18px的倍数：垂直方向上两个补白两个边框，那么1 + 8 + 8 + 1 = 18.
加上去后，我们发现，恩？怎么没有右边文字没有对齐到网格上呢？原来加上了补白和边框后，边注下移了9px，所以网格就没有对齐啦。那么，我们就要把边注上移9px。现在，我们可以看到右边的文字已经对齐到网格。是不是感觉不错？
不同字体大小的正文
如果有一天，老板告诉你，正文的字体太小啦，他看得眼花。你因此不得不将左边的正文设置成14px大小的字体，右边的边注保持12px。由于正文字体变大，我们也同时加大行距。根据我们前面学到的知识，我重新设计了间距：
正文：字体大小14px，行距24px，段后距24px
h1：字体大小24px，行距24px，段前距24px，段后距24px
h2：字体大小：18px，行距24px，段前距12px，段后距12px
边注正文：字体大小12px，行距24px，段后距24px
边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px
效果见:
0
投稿猜你喜欢
- 装饰器装饰器的定义关于装饰器的定义，我们先来看一段github上大佬的定义：Function decorators are simply w
- 解决window.open后返回object的错误 <a href="javascript:void(window.open
- 1 创建JupyterLab运行脚本首先找到jupyter-lab命令的位置，一般在~/.local/bin/下，可以创建shell脚本au
本节我们首先来尝试识别最简单的一种验证码，图形验证码，这种验证码出现的最早，现在也很常见，一般是四位字母或者数字组成的，例如中国知网的注册页- PHP是一种面向对象的编程语言，它允许开发者使用面向对象的编程技术来构建复杂的应用程序。下面是一些关于PHP面向对象编程的讲解：类与对象类是
- 大纲本文主要介绍一下numpy中的几个常用函数，包括hstack()、vstack()、stack()、concatenate()。1、co
- ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于RESTful web接口。E
- 本文主要介绍的关于Python切片赋值的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：昨天有同学问了我这么个问题:t = [1
- object.OpenTextFile(filename[, iomode[, create[, format]]]) 参数 object
- 本文实例讲述了python获取指定网页上所有超链接的方法。分享给大家供大家参考。具体如下：这段python代码通过urllib2抓取网页，然
- 这篇论坛文章（赛迪网技术社区）着重介绍了有关SQL注入防御的防御策略及实施步骤，详细内容请参考下文：从去年下半年开始，很多网站被损害，他们在
- SQL Server判断语句（IF ELSE/CASE WHEN ）执行顺序是 – 从上至下 – 从左至右 --，所当上一个条件满足时（无论
- 由于pytorch的whl 安装包名字都一样，所以我们很难区分到底是基于cuda 的哪个版本。有一条指令可以查看import torchpr
- Python编程语言判断是否是目录在Python编程语言中可以使用os.path.isdir()函数判断某一路径是否为目录。其函数原型如下所
- 本文实例为大家分享了vue实现简单全选和反选的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html
- 一、条件简化我们编写的查询语句的搜索条件本质上是一个表达式，这些表达式可能比较繁杂，或者不能高效的执行，MySQL的查询优化器会为我们简化这
- 前言来自 Google 的 Andrew Gerrand 曾经关于 Go 中的参数命名规范进行了分享，slides 为 https://ta
- 1.先检查系统是否装有mysqlrpm -qa | grep mysql2.下载mysql的repo源（5.7）wget -i -c htt
- 从两个优秀的世界各取所需，更高效的复用代码。想想就醉了，.NET和python融合了。“懒惰”的程序员们，还等什么？Jesse Smith为
- 背景刚入行的同学，看到在SQL语句中出现where 1 = 1这样的条件可能会有所困惑，而长时间这样使用的朋友可能又习以为常。那么，你是否还
