05-padding
padding
padding:内边距,内容到边框的距离
而且,padding是有背景颜色的。background-color属性将填充所有border以内的区域(不包括border)
padding的设置
1、分别设置不同方向的padding
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:30px;
2、综合属性
padding:20px 30px 20px 30px; (上、右、下、左)
padding:20px 30px 20px; (上、左右、下)
padding:20px 30px; (上下、左右)
padding:20px; (上下左右)
做网站,先清除padding
有些标签默认是有padding的,例如ul标签,默认有padding-left的值。
利用组合选择器
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
使用css的引入方式中的外接样式导入即可。
作者:流浪者
日期:2019-08-31
05-padding的更多相关文章
- 美化radio和checkbox样式
HTML部分 <div id="holder"> <div> <div class="tag">Checkbox Small ...
- css3美化复选框checkbox
两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...
- Ques核心思想——CSS Namespace
Facebook’s challenges are applicable to any very complex websites with many developers. Or any situa ...
- CSS3实现自定义Checkbox和Radiobox
我们知道浏览器自带的Checkbox复选框不怎么美观(这或许是我们看习惯了的缘故),而且复选框在不同的浏览器上显示的样式又有很大的差异,由于目前越来越多的人开始接受支持CSS3的现代浏览器,所以今天就 ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
- 纯CSS美化的checkbox 和 radio
html <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现自定义美化复选框和单选框</title> ...
- 设计模式,Let's Go! (上)
* { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...
- 设计模式,Let's “Go”! (中)
* { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...
- 设计模式,Let's “Go”! (下)
* { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...
- 见招拆招-PostgreSQL中文全文索引效率优化
* { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...
随机推荐
- 使用element-ui中table expand展开行控制显示隐藏
问题讲解:在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table ...
- 棋盘问题 POJ - 1321 [kuangbin带你飞]专题一 简单搜索
在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆放方案C. ...
- 从一道看似简单的面试题重新理解JS执行机制与定时器
壹 ❀ 引 最近在看前端进阶的系列专栏,碰巧看到了几篇关于JS事件执行机制的面试文章,因为我在之前一篇 JS执行机制详解,定时器时间间隔的真正含义 博文中也有记录JS执行机制,所以正好用于作为测试自 ...
- 工作中遇到的99%SQL优化,这里都能给你解决方案(二)
-- 示例表 CREATE TABLE `employees` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(24) NOT NULL ...
- 深入浅出理解EdgeBoard中NHWC数据格式
摘要: 在深度学习中,为了提升数据传输带宽和计算性能,经常会使用NCHW.NHWC和CHWN数据格式,它们代表Image或Feature Map等的逻辑数据格式(可以简单理解为数据在内存中的存放顺序) ...
- 一次使用scrapy的问题记录
前景描述: 需要获取某APP的全国订单量,及抢单量.由于没有全国的选项所以只能分别对每一个城市进行订单的遍历.爬虫每天运行一次,一次获取48小时内的订单,从数据库中取出昨天的数据进行对比,有订单被抢则 ...
- Linux 安装二进制MySQL 及 破解MySQL密码
1.确保系统中有依赖的libaio 软件,如果没有: yum -y install libaio 2.解压二进制MySQL软件包 tar xf mysql-5.7.24-linux-glibc2.12 ...
- Django-手撸简易web框架-实现动态网页-wsgiref初识-jinja2初识-python主流web框架对比-00
目录 自己动手实现一个简易版本的web框架 手撸一个web服务端 根据请求 url 做不同的响应处理 基于wsgiref模块实现服务端 用wsgiref 模块的做的两件事 拆分服务端代码 支持新的请求 ...
- Slickflow.NET 开源工作流引擎快速入门之三: 简单或分支流程代码编写示例
前言:对于急切想了解引擎功能的开发人员,在下载版本后,就想尝试编写代码,完成一个流程的开发和测试.本文试图从请假流程,或分支模式来快速了解引擎代码的编写. 1. 创建或分支流程图形 或分支流程是常见的 ...
- thinkphp6.0 集成Alipay 手机和电脑端支付的方法
本文由 BI8EJM 原创,转载请注明出处! 第一步 下载 Alipay 的PHP SDK :https://docs.open.alipay.com/54/103419/ 第二步 解压下载都到的压 ...