盒子模型内边距及复合写法

最新推荐文章于 2024-08-24 21:32:07 发布

WangZhang_521

最新推荐文章于 2024-08-24 21:32:07 发布

阅读量169

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/WangZhang_521/article/details/122191608

版权

CSS 盒子模型内边距复合写法布局

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

85 篇文章 1 订阅

订阅专栏

01-内边距

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;
            padding-top: 30px;
        }
    </style>
</head>

<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>

</html>

效果展示

在这里插入图片描述

02-内边距复合写法

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding-left: 5px; */
            /* padding-top: 5px; */
            /* padding-bottom: 5px; */
            /* padding-right: 5px; */
            /* 内边距复合写法 */
            /* 一个值表示上下左右都有5像素内边距 */
            /* padding: 5px; */
            /* 两个值表示上下内边距是5像素 左右内边距是10像素 */
            /* padding: 5px 10px; */
            /* 三个值表示上内边距是5像素，左右内边距是10像素，下内边距是20像素 */
            /* padding: 5px 10px 20px; */
            /* 四个值表示上是5像素 右是10像素 左是20像素 右是30像素 */
            padding: 5px 10px 20px 30px;
        }
    </style>
</head>

<body>
    <div>盒子内容是content盒子内容是content盒子内容是content盒子内容是content</div>
</body>

</html>

效果展示

在这里插入图片描述

WangZhang_521

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型内边距及复合写法

01-内边距<!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"> <titl
复制链接

扫一扫

专栏目录