影响盒子大小的因素，案例-利用padding改变盒子大小的性质来制作导航栏

发呆少女

于 2022-06-03 00:44:51 发布

阅读量1k

点赞数 1

分类专栏： CSS学习文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/qq_43632490/article/details/124865200

版权

理解CSS中padding和border如何影响盒子实际尺寸，掌握何时padding不会撑大盒子，通过实例解析不指定宽度时padding的特性，并演示如何利用这些知识模拟新浪导航栏的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、padding和border的设置会影响盒子的实际大小，因此需要注意一下width和height的设置，注意去掉padding和border的大小。

2、什么时候padding不会撑大盒子呢？
当不指定宽度或者高度时，padding不会撑大盒子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

最低0.47元/天解锁文章