CSS border详解+padding详解+margin详解

最新推荐文章于 2024-06-24 11:02:57 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量1.2k

点赞数

分类专栏： css系列（精通精通）

本文链接：https://blog.csdn.net/qq_37805832/article/details/109379708

版权

css系列（精通精通）专栏收录该内容

48 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML和CSS中关于边框（border）和内填充（padding）的使用。通过实例展示了如何设置不同边框的颜色、样式和宽度，以及内填充对元素内容的影响。边框的设置包括了四个方向的独立控制，而内填充则会影响元素内容的位置，但不会改变元素的总尺寸。此外，还提到了外边距（margin）的属性和合并现象，以及其在布局中的作用。

摘要由CSDN通过智能技术生成

border篇：

<!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 type="text/css">
        *{padding: 0px;margin: 0px;}
        .box
        {
            width: 100px;
            height: 100px;
            background-color: red;
            border-top: 5px solid blue;
            border-right: 10px dashed green;
            border-left: 20px double pink;
            border-bottom: 15px dotted purple;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

注意一下：

要有边框先有宽高啊.

效果：

在这里插入图片描述

<!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 type="text/css">
        *{padding: 0px;margin: 0px;}
        .box
        {
            /*border-width: 5px 10px 15px 20px;*/
            /*border-style: solid dashed dotted double;*/
            /*border-color: blue green purple pink;*/
            /*border-color: blue green purple;*/
            /*border-color: blue green;*/
            /*border-color: blue;*/
            width: 500px;
            height: 500px;
            background-color: red;
            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;
            border-right-width: 10px;
            border-right-style: dashed;
            border-right-color: green;

            border-bottom-width: 15px;
            border-bottom-style: dotted;
            border-bottom-color: purple;

            border-left-width: 20px;
            border-left-style: double;
            border-left-color: pink;

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

特点：
记住哈,一个所谓的边框必须有三样.
第一;这个边框是什么颜色的.
第二：这个边框的样式是什么样的？
第三;这个边框有多少的厚度.

举个例子把好吧.
如果只有上右下的话,左边与右边一样.
如果只有上右的话,上下一样,左右一样.
如果只有上的话,三边都和上一样.

效果;
在这里插入图片描述

padding+margin篇：

<!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 type="text/css">
        *{padding: 0px;margin: 0px;}
        div
        {
            width: 98px;
            height: 90px;
            border: 1px solid red;
            background: yellow;
        }
        .box2
        {
            padding-top: 20px;
        }
        .box3
        {
            padding-right: 40px;
        }
        .box4
        {
            padding-bottom: 80px;
        }
        .box5
        {
            padding-left: 160px;
        }
        .box6
        {
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="box1">我是本来的.</div>
<hr>
<div class="box2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box3">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box4">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box5">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box6">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
</body>
</html>

注意一下;
举个例子把好吧.
如果只有上右下的话,左边与右边一样.
如果只有上右的话,上下一样,左右一样.
如果只有上的话,三边都和上一样.

效果;是不是位置没变啊.是吧。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>46-外边距属性</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .box1{
            margin:20px;
        }

    </style>
</head>
<body>
    
<span class="box1">我是span</span><span class="box2">我是span</span><span class="box3">我是span</span><div class="box4"></div>

</body>
</html>

注意一下,
如果只有上右下的话,左边与右边一样.
如果只有上右的话,上下一样,左右一样.
如果只有上的话,三边都和上一样.

效果：

在这里插入图片描述

外边距合并现象:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>47-外边距合并现象</title>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .hezi1{
            margin-right:50px;
        }
        .hezi2{
            margin-left:100px;
        }
        .box1{
            margin-bottom:50px;
        }
        .box2{
            margin-top:100px;
        }
    </style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>

记住,

看第一张与第二张图片。是水平方向的,会出现累加的外边距.
看第三张与第四张图片是最大的那个外边距说了算.

在这里插入图片描述

贵哥的编程之路(热爱分享)

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
CSS border详解+padding详解+margin详解

border篇：<!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 type="text/css">
复制链接

扫一扫