前端CSS-内边距padding，外边距margin和文本图片居中问题解决

最新推荐文章于 2023-11-02 20:10:02 发布

weixin_41987434

最新推荐文章于 2023-11-02 20:10:02 发布

阅读量532

点赞数

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

本文链接：https://blog.csdn.net/weixin_41987434/article/details/125352994

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.内边距padding
CSS 样式内边距 padding 行内和块级标签也可以使用，display: inline-block;
如下代码解释：

<head>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding-top: 20px;  #内部空间中，向上空出20px大小边距
			padding-left: 20px; #内部空间中，向左空出20px大小边距
			padding-right: 20px;  #内部空间中，向右空出20px大小边距
			padding-bottom: 20px;  #内部空间中，底部空出20px大小边距
			padding:20 px;  #内部空间中，上下左右空出20px大小边距
			padding:20px 10px 5px 20px;  #内部空间中，上右下左空出20px大小边距（按顺时针）
        }
    </style>
</head>
<body>
    <div class="outer" style="background-color: pink">
        你好
    </div>
    <div>恭喜你</div>
</body>
</html>

外边距margin
CSS 外边距margin
外边距就是距离别人的距离
margin-top: 22px; 距离上面22px

3.CSS 边框居中
.c1{
background-color: pink;
width: 500px;
height: 800px;

        margin: 0 auto;  #自动调节居中，一定要设置宽度
    }

内容居中：
文本居中，文本会在这个区域中居中

<div style="width:200px;text-align:center;">111</div>

line-height:50px; #垂直方向居中针对文本内容，不针对图片区域

区域居中，自己要有宽度+margin-left:auto;margin-right:auto;

weixin_41987434

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端CSS-内边距padding，外边距margin和文本图片居中问题解决

前端内外边距和居中问题解决
复制链接

扫一扫

专栏目录

前端CSS-内边距padding，外边距margin和文本图片居中问题解决

“相关推荐”对你有帮助么？