一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS padding</title>

    <style>

    p {

        background-color: yellow;

    }

    p.padding {

        padding-top: 25px;

        padding-bottom: 25px;

        padding-right: 50px;

        padding-left: 50px;

    }

    </style>

</head>

<body>

    <p>This is a paragraph with no specified padding.</p>

    <p class="padding">This is a paragraph with specified paddings.</p>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS Padding（填充）的更多相关文章

  1. css padding 填充

    语法: padding:[ <length> | <percentage> ]{1,4} 默认值:看每个独立属性 适用于:所有元素,除 table-row-group | ta ...

  2. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  3. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  4. 前端笔记 （2.CSS）

    知识点借鉴于慕课网,菜鸟教程和w3shool CSS方面: CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 使用CSS样式的一个好处是通过 ...

  5. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  6. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  7. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  8. 写给自己的web总结——css篇（1）

    上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css. 初步了解css css的全称为cascading style sheet-- 层叠样式表,通过编入代码来对html里的标签做出各种 ...

  9. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  10. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

随机推荐

  1. 麒麟子Cocos Creator实用技巧

    大家好,我是麒麟子, 开源棋牌<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 自09年进入游戏行业以来,不知不觉已经度过了十个春秋. 曾经我也血气方 ...

  2. 什么是shell和终端？

    目录 什么是shell? 什么是终端? 什么是shell? 当谈到命令时,我们实际上指的是shell.shell是一个接收由键盘输入的命令,并将其传递给操作系统来执行的程序.几乎所有的Linux发行版 ...

  3. 微信小程序快速开发上手

    微信小程序快速开发上手 介绍: 从实战开发角度,完整系统地介绍了小程序的开发环境.小程序的结构.小程序的组件与小程序的API,并提供了多个开发实例帮助读者快速掌握小程序的开发技能,并能自己动手开发出小 ...

  4. JavaWeb开发SSM框架搭建详解

    1.需要用到的jar包:由于很多的jar包不好下载,我直接上传到百度网盘: 很多,而且不好下载,我已经整理好好了: 链接:https://pan.baidu.com/s/1iIFprmstp86uKz ...

  5. C语言——Win10系统下安装VC6.0教程

    学习一门语言最重要的一步是搭建环境,许多人搭建在搭建环境上撞墙了,就有些放弃的心理了:俗话说,工欲善其事,必先利其器:所以接下来我们进行学习C的第一步搭建环境; 第一步:先解压我们下载好的VC6.0软 ...

  6. 如何随机排序数组？使用多种方式！递归，迭代，洗牌，sort方法！

    方式1: 使用sort 方法 ---- // 方法1 使用sort 方法 var arr = [1,2,3,4,5,6,7,8]; function foo(arr) { var cloneArr = ...

  7. app自动化问题点整理

    1.配置SDK环境发现adb无法生效: 解决方案: 这个问题一般就是你的环境变量没有配置好,很多同学比较容易出现的点就是win10系统的环境变量配置: 一定要注意打开path添加:%ANDROID_H ...

  8. Zabbix4.0.3解决中文乱码

    字体下载地址:https://github.com/hejianlai/Zabbix/raw/master/font/msyh.ttf放到以下目录,可能你的路径和我的不一样用find查出来cd /us ...

  9. MVC从路由到Controller运行机制

    下图中每个箭头的左侧对应的右侧方法为对象调用方法的过程: 由于UrlRoutingModule这个HttpModule被注册到Web应用中,所有对每个抵达的请求来说,当代表当前应用的HttpAppli ...

  10. SpringBoot入门教程(八)配置logback日志

    Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和logback-access.logback-c ...