【响应式Web前端设计】HTML DOM padding 属性
定义和用法
padding 属性设置元素的内边距。
padding 属性定义元素边框与元素内容之间的空间。
该属性可采取 4 个值:
如果规定一个值,比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。
如果规定两个值,比如 div {padding: 50px 10px} - 上下内边距是 50 px,左右内边距是 10 px。
如果规定三个值,比如 div {padding: 50px 10px 20px} - 上内边距是 50 px,左右内边距是 10 px,下内边距是 20 px。
如果规定四个值,比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px,右内边距是 10 px,下内边距是 20 px,左内边距是 30 px。
语法:
Object.style.padding=padding
Possible Values
值 描述
padding
设置内边距。
值可以是:
百分比(基于父对象总高度或宽度的百分比)
长度值(定义一个固定的边距)
auto(浏览器设定的值)。
实例
本例改变元素的内边距:
<html>
<head>
<style type="text/css">
p
{
border: thin dotted #FF0000;
}
</style>
<script type="text/javascript">
function changePadding()
{document.getElementById("p1").style.padding="2cm";
}
</script>
</head>
<body><input type="button" οnclick="changePadding()"
value="Change padding" /><p id="p1">This is a paragraph</p></body>
</html>
【响应式Web前端设计】HTML DOM padding 属性相关推荐
- 【响应式Web前端设计】一文学会使用Bootstrap!
文章目录 1 概念 2 Bootstrap简介 3 布局容器 4 导航栏(navbar) 4.1 基本 4.2 响应式 5 垂直表单-基本表单 6 栅格系统 7 标签页 8 响应式工具 请先学习该文 ...
- 【响应式Web前端设计】new Option()函数的作用(三区联动)
在做三级联动的时候遇见了这个函数,对函数的用法进行一下小总结,不太详细,敬请谅解. 作用:用于创建一个新的选项 Option()构造函数接受两个参数:文本(text)和值(value);第二个参数可选 ...
- 【响应式Web前端设计】Register Demo
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>用户 ...
- 【响应式Web前端设计】Login Demo
body{background: url('../img/1.png')no-repeat center center fixed;background-size: cover;padding: 20 ...
- 【响应式Web前端设计】Bootstrap入门Demo(导航栏)
文章目录 1 导入bootstrap.min.css 2 效果 3 代码 1 导入bootstrap.min.css 2 效果 3 代码 <!--作者:88304454@qq.com时间:202 ...
- 【响应式Web前端设计】CSS3 :nth-of-type() 选择器
<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) {background:#ff0000; ...
- 【响应式Web前端设计】css如何设置边框的圆角样式?border-radius属性设置圆角样式(图 文)
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
- 【响应式Web前端设计】css中:overflow:hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏. 1.我们给一个父元素,里面有两个子元素 2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左 ...
- 【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
最新文章
- MySQL数据库之索引的应用
- PD003-NET通用后台系统
- 使用AFNetworking 报错提示
- 重装系统后电脑没有计算机也没有网络连接,电脑网络重置以后没有了wifi连接...
- Java基础学习总结(166)——Google 13 条代码审查标准
- 剑指Offer之第一个只出现一次的字符
- LeetCode:202. 快乐数
- Android onSaveInstanceState onRestoreInstanceState
- yuv422sp to yuv422p
- GitHub中文排行榜,帮助你发现高分优秀中文项目(二)-Java
- IDEA:Cannot determine Java VM executable in selected JDK
- OBV指标交易策略(累积能量潮与移动能量潮,成交量多空比率净额及相关应用原则)
- 【学习笔记 1】集成电路发展及其设计制造流程(ICer必备)
- Android Thermal
- java oracle spatial_安装Oracle Spatial数据组件
- 红米Android降级,红米Note 5(安卓9.0 不要降级刷低版本)纯净ROOT线刷包分享,一键救砖教程,轻松刷回官方系统,流畅如初!...
- 【QTP专题】03_Add-in Manager插件
- Android Weekly #31:你最能影响「他者」的,是你正在工作的状态
- python获得当前时间戳_python怎么获取当前时间戳
- 扎心了!当代大学生孤独等级测试,你是第几级?