html如何设置填充,CSS填充距离怎么设置？

CSS将HTML中所有的元素都认为是一个“盒子”，并把这个“盒子”分为了三个组成部分，这三个组成部分分别叫做“填充”、“边界”、“边框”。

顾名思义，盒子的主要功能就是盛放东西，CSS的意思是将各个HTML标记对看做了容器，而标记对内部存放的文本、图片、列表、表格、表单等都被看做了容器所盛放的内容。

CSS技术为盒子的三个组成部分下了明确的定义：填充：指盒子边框与盒子内容之间的距离。

边界：指盒子与盒子之间的距离。

边框：指填充与边界之间的部分。

盒子的三个组成部分中，“填充”和“边界”只提供了相关的距离属性，而“边框”提供了相关的距离属性、颜色属性和样式属性。

填充距离怎么设置？

CSS可以利用padding系列属性来调整盒子的填充距离。

padding属性的取值为四个数值，按照“上、右、底、左”的顺序排列书写，之间用空格隔开。

padding属性的使用格式：padding:top right bottom left;

padding属性的取值：带有单位的长度值。

auto

百分比

padding属性还派生出下列四个子属性，用于调整四个方向上单独的填充距离：padding-top，设置盒子顶部填充的距离。

padding-right，设置盒子右侧填充的距离。

padding-bottom，设置盒子底部填充的距离。

padding-left，设置盒子左侧填充的距离。

注意：盒子的填充具备了数值后，为了保证盒子的大小不发生变化，必须修改盒子的宽度和高度。盒子的实际高度=盒子的期望高度-盒子的顶部填充距离-盒子的底部填充距离

盒子的实际宽度=盒子的期望宽度-盒子的左侧填充距离-盒子的右侧填充距离

例如：希望创建一个宽度为500，高度为300的盒子。同时顶部填充距离为10像素，左侧填充距离为20像素，右侧和底部填充均不设置，则padding属性取值如下：padding:10px 0 0 20px;

因此，计算盒子的实际宽高：盒子的实际高度=300px-10px-0px=290px

盒子的实际宽度=500px-20px-0px=480px

所以，该盒子的CSS代码应设置为如下所示：width:480px; height:290px;

padding:10px 0 0 20px;

当然，有开发经验的人一定知道，CSS3提供了一个名为box-sizing的属性，避免了这类填充相减的复杂操作。

html如何设置填充,CSS填充距离怎么设置？相关推荐

css字体设置透明度,CSS字体透明度怎么设置？
在css中有很多好看的样式都可以实现,css设置出来的样式让整个网页看起来也会非常美观,今天的这篇文章就给大家来介绍一下在css中怎么设置字体的透明度,让你的字体在网页中看起来是透明的. 在css3中 ...
html背景图片内填充,CSS基础——使用图片填充元素背景
在网页设计中,使用图片来填充元素背景,可以让元素背景呈现丰富多彩的外观.使用图片填充元素背景的常用样式标签有background-image.background-repeat.background- ...
html中设置背景图像填充,CSS-定位背景图像，添加填充
CSS-定位背景图像,添加填充这个问题在这里已有答案: CSS:背景图片和填充 8个答案我想将背景添加到div,位置居中,但 ...
html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、渐变填充、图案填充、文本的属性设置）...
(1)文本的描边.填充.阴影 (2)文本的渐变填充 (3)文本的图案填充 (4)文本的属性设置及效果呈现交互绘制文本.html 交互绘制文本 body { background: #eeeeee; ...
设置单元格填充方式_单元格的选择及设置单元格格式
数据输入完毕,接下来可以设置字体.对齐方式.添加边框和底纹等方式设置单元格格式,从而美化工作表.要对单元格进行设置,首先要选中单元格. 选择单元格选择单元格是指在工作表中确定活动单元格以便在单元格中 ...
java设置字体大小和颜色_Java 设置Excel图表背景填充（颜色、图片填充）
本文介绍通过Java程序来设置Excel图表背景填充的方法,填充时,可设置颜色填充或者加载图片填充:填充区域可设置整个图表区域或者绘图区域.设置方法参考以下内容. 使用工具:Free Spire.XL ...
css中字体之间的距离是什么意思,css字符间距(css文字间距怎么设置)
怎么样控制字和字之间的间距,而不是行间距. 在需要设置的CSS标签下加入一下代码即可.word-spacing:8px;letter-spacing: 1px; line-height:25px是绝对 ...
php中控制段落的行距,CSS段落间距调整 P标签段落距离如何设置
CSS对P段落之间间隔距离调整如何设置解决篇在网页中文章段落一般我们用html 标签进行分段,使用P标签上一段文章与下一段文章中间就会产生距离,如何控制P与P之间间距呢?接下来DIVCSS5为大家全 ...
php怎么设置段落之间的距离,css如何设置段落间距？margin 属性设置段落间距（代码实例）...
段落间距是网页设计里一个提升文章阅读体验的重要因素.但网页排版不想Word那样简单,而作为网页设计师,为了读者的良好阅读体验,我们必须为文章的每个小标题和段落都预留一定的空间,用css有效率地设置段落 ...

html如何设置填充,CSS填充距离怎么设置？

html如何设置填充,CSS填充距离怎么设置？相关推荐

最新文章

热门文章