CSS 内边距 |
您所在的位置:网站首页 › 水平页边距和垂直页边距 › CSS 内边距 |
w3school 在线教程
HTML 系列教程
浏览器脚本
服务器脚本
编程教程
XML 系列教程
建站手册
参考手册
CSS 基础教程
CSS 教程
CSS 简介
CSS 语法
CSS 选择器
CSS 使用
CSS 注释
CSS 颜色
CSS RGB 颜色
CSS HEX 颜色
CSS HSL 颜色
CSS 背景
CSS 背景图像
CSS 背景重复
CSS 背景附着
CSS 简写背景属性
CSS 边框
CSS 边框宽度
CSS 边框颜色
CSS 边框各边
CSS 简写边框属性
CSS 圆角边框
CSS 外边距
CSS 外边距合并
CSS 内边距
CSS 高度/宽度
CSS 框模型
CSS 轮廓
CSS 轮廓宽度
CSS 轮廓颜色
CSS 简写轮廓属性
CSS 轮廓偏移
CSS 文本
CSS 文本对齐
CSS 文本装饰
CSS 文本转换
CSS 文字间距
CSS 文本阴影
CSS 字体
CSS 字体样式
CSS 字体大小
CSS 谷歌字体
CSS 简写字体属性
CSS 图标
CSS 链接
CSS 列表
CSS 表格
CSS 中级教程
CSS Display
CSS max-width
CSS 定位
CSS 溢出
CSS 浮动
CSS 清除浮动
CSS 布局 - 浮动实例
CSS inline-block
CSS 对齐
CSS 组合器
CSS 伪类
CSS 伪元素
CSS 不透明度
CSS 导航栏
CSS 垂直导航栏
CSS 水平导航栏
CSS 下拉菜单
CSS 图片库
CSS 图像精灵
CSS 属性选择器
CSS 表单
CSS 计数器
CSS 网站布局
CSS 单位
CSS 特异性
CSS3 高级教程
CSS 圆角
CSS 边框图像
CSS 背景
CSS 颜色
CSS 渐变
CSS 径向渐变
CSS 阴影
CSS box-shadow
CSS 文本效果
CSS 网络字体
CSS 2D 转换
CSS 3D 转换
CSS 过渡
CSS 动画
CSS 工具提示
CSS 图像样式
CSS object-fit
CSS 按钮
CSS 分页
CSS 多列
CSS 用户界面
CSS 变量
CSS 覆盖变量
CSS 变量 - JavaScript
CSS 变量 - 媒体查询
CSS Box Sizing
CSS Flexbox
CSS 媒体查询
CSS 媒体查询实例
CSS 响应式设计
RWD 简介
RWD 视口
RWD 网格视图
RWD 媒体查询
RWD 图像
RWD 视频
CSS 网格教程
CSS 网格布局模块
CSS 网格容器
CSS 网格项目
CSS 实例
CSS 实例
CSS 测验
CSS 测验
CSS 参考手册
CSS 参考手册
CSS 浏览器支持
CSS 选择器
CSS 函数
CSS 单位
CSS 听觉
CSS 网络安全字体
CSS 可动画制作
CSS 单位
CSS 颜色
CSS 颜色值
CSS 默认值
CSS 实体
CSS 内边距
CSS 外边距合并
CSS 高度/宽度
此元素的内边距为 70px。
CSS 内边距
CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。 通过 CSS,您可以完全控制内边距(填充)。有一些属性可以为元素的每一侧(上、右、下和左侧)设置内边距。 Padding - 单独的边CSS 拥有用于为元素的每一侧指定内边距的属性: padding-top padding-right padding-bottom padding-left所有内边距属性都可以设置以下值: length - 以 px、pt、cm 等单位指定内边距 % - 指定以包含元素宽度的百分比计的内边距 inherit - 指定应从父元素继承内边距提示:不允许负值。 实例为 元素的所有四个边设置不同的内边距: div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; }亲自试一试 Padding - 简写属性为了缩减代码,可以在一个属性中指定所有内边距属性。 padding 属性是以下各内边距属性的简写属性: padding-top padding-right padding-bottom padding-left 工作原理是这样的:如果 padding 属性有四个值: padding: 25px 50px 75px 100px; 上内边距是 25px 右内边距是 50px 下内边距是 75px 左内边距是 100px 实例使用设置了四个值的 padding 简写属性: div { padding: 25px 50px 75px 100px; }亲自试一试 如果 padding 属性设置了三个值: padding: 25px 50px 75px; 上内边距是 25px 右和左内边距是 50px 下内边距是 75px 实例使用设置了三个值的 padding 简写属性: div { padding: 25px 50px 75px; }亲自试一试 如果 padding 属性设置了两个值: padding: 25px 50px; 上和下内边距是 25px 右和左内边距是 50px 实例使用设置了两个值的 padding 简写属性: div { padding: 25px 50px; }亲自试一试 如果 padding 属性设置了一个值: padding: 25px; 所有四个内边距都是 25px 实例使用设置了一个值的 padding 简写属性: div { padding: 25px; }亲自试一试 内边距和元素宽度CSS width 属性指定元素内容区域的宽度。内容区域是元素(盒模型)的内边距、边框和外边距内的部分。 因此,如果元素拥有指定的宽度,则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。 实例在这里, 元素的宽度为 300px。但是, 元素的实际宽度将是 350px(300px + 左内边距 25px + 右内边距 25px): div { width: 300px; padding: 25px; }亲自试一试 若要将宽度保持为 300px,无论填充量如何,那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距,则可用的内容空间会减少。 实例使用 box-sizing 属性将宽度保持为 300px,无论填充量如何: div { width: 300px; padding: 25px; box-sizing: border-box; }亲自试一试 更多实例 设置左内边距 本例演示如何设置元素的左内边距。 设置右内边距 本例演示如何设置 元素的右内边距。 设置上内边距 本例演示如何设置 元素的上内边距。 设置下内边距 本例演示如何设置 元素的下内边距。 所有 CSS 内边距属性 属性 描述 padding 用于在一条声明中设置所有内边距属性的简写属性。 padding-bottom 设置元素的下内边距。 padding-left 设置元素的左内边距。 padding-right 设置元素的右内边距。 padding-top 设置元素的上内边距。 延伸阅读 课外书:框模型:CSS 内边距 CSS 外边距合并 CSS 高度/宽度 CSS 参考手册 CSS 实例 CSS 测验 CSS 课外书W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有,保留一切权利。 关于 W3School 帮助 W3School 使用条款 隐私条款 技术支持:赢科 蒙ICP备06004630号 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |