外边距margin和内间距padding

最新推荐文章于 2023-12-19 15:56:44 发布

༄༊心灵骇客༣

最新推荐文章于 2023-12-19 15:56:44 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/boyas/article/details/111935122

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

边距：外边距内边距

外边距：margin
内间距：padding

margin和padding的值：
一个值：代表上下左右四个方向的外边距都是一样
两个值：第一个值（上下方向的值）第二个（左右方向）
三个值：第一个（上）第二个（左右）第三个（下）
四个值：第一个(上—) 第二个是右，第三个是下，第四个是左

margin的特性：垂直方向上会重合或者在父级上显示出来
padding：默认会撑大容器标签

背景颜色填充范围默认是宽高区域+padding+border区域

块级（block）：独占一行，支持宽高margin
内联（行内inline）：会并排，不支持宽高margin
行内块（inline-block）：都支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: grey;
        }
        .wrap{
            display:inline-block;
            width: 250px;
            height: 250px;
            margin-top: 20px;
            margin-left: 30px;
            border: 1px solid black;
            background-color: white;
        }
        .wrap img{
            width: 100px;
            height: auto;
            float: right;
            margin-right: 10px;
        }
        .p{
            text-indent: 10px;
        }
        p{
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="p">
            <h2>假装这是一个商品</h2>
            <p>这是对商品的描述</p>
        </div>
        <img src="images/1.jpg" alt="">
    </div>
    <div class="wrap">
        <div class="p">
            <h2>假装这是一个商品</h2>
            <p>这是对商品的描述</p>
        </div>
        <img src="images/2.jpg" alt="">
    </div>
    <div class="wrap">
        <div class="p">
            <h2>假装这是一个商品</h2>
            <p>这是对商品的描述</p>
        </div>
        <img src="images/3.jpg" alt="">
    </div>
    <div class="wrap">
        <div class="p">
            <h2>假装这是一个商品</h2>
            <p>这是对商品的描述</p>
        </div>
        <img src="images/4.jpg" alt="">
    </div>
    <div class="wrap">
        <div class="p">
            <h2>假装这是一个商品</h2>
            <p>这是对商品的描述</p>
        </div>
        <img src="images/5.jpg" alt="">
    </div>
</body>
</html>

在这里插入图片描述

༄༊心灵骇客༣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
外边距margin和内间距padding

边距：外边距内边距外边距：margin内间距：paddingmargin和padding的值：一个值：代表上下左右四个方向的外边距都是一样两个值：第一个值（上下方向的值）第二个（左右方向）三个值：第一个（上）第二个（左右）第三个（下）四个值：第一个(上—) 第二个是右，第三个是下，第四个是左margin的特性：垂直方向上会重合或者在父级上显示出来padding：默认会撑大容器标签背景颜色填充范围默认是宽高区域+padding+border区域块级（block）：独占一行，支
复制链接

扫一扫