新浪导航案例-padding影响盒子好处

王祎0825

已于 2022-03-23 23:30:13 修改

阅读量354

点赞数

分类专栏：阶段一：前端开发基础文章标签： css html css3

于 2022-03-13 21:57:49 首次发布

本文链接：https://blog.csdn.net/qq_44757223/article/details/123467005

版权

padding内边距可以撑开盒子，可以进行巧妙运用。

因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding最合适。

新浪导航栏相关取值：

上边框为3像素，颜色为#ff8500
下边框为1像素，颜色为#fedeef0
盒子高度为41像素，背景颜色为#fcfcfc
文字颜色为#4c4c4c

 <!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>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        
        .nav a {
            display: inline-block;
            height: 41px;
            padding: 0 20px;

最低0.47元/天解锁文章

王祎0825

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
新浪导航案例-padding影响盒子好处

padding内边距可以撑开盒子，可以进行巧妙运用。因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding最合适。新浪导航栏相关取值：上边框为3像素，颜色为#ff8500下边框为1像素，颜色为#fedeef0盒子高度为41像素，背景颜色为#fcfcfc文字颜色为#4c4c4c <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫