CSS中如何调整盒子的填充距离

这篇文章主要介绍了CSS中如何调整盒子的填充距离,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联公司成立于2013年,是专业互联网技术服务公司,拥有项目网站制作、成都网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元新疆做网站,已为上家服务,为新疆各地企业和个人服务,联系电话:18980820575

CSS技术将HTML中所有的元素都认为是一个“盒子”,并把这个“盒子”分为了三个组成部分,这三个组成部分分别叫做“填充”、“边界”、“边框”。顾名思义,盒子的主要功能就是盛放东西,CSS的意思是将各个HTML标记对看做了容器,而标记对内部存放的文本、图片、列表、表格、表单等都被看做了容器所盛放的内容。

CSS技术为盒子的三个组成部分下了明确的定义:

1.填充:指盒子边框与盒子内容之间的距离。

2.边界:指盒子与盒子之间的距离。

3.边框:指填充与边界之间的部分。

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

调整盒子的填充距离:

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的属性,避免了这类填充相减的复杂操作。

感谢你能够认真阅读完这篇文章,希望小编分享的“CSS中如何调整盒子的填充距离”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


新闻标题:CSS中如何调整盒子的填充距离
当前链接:http://scyanting.com/article/igdssj.html