博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
day14-css之内外边距
阅读量:7058 次
发布时间:2019-06-28

本文共 995 字,大约阅读时间需要 3 分钟。

一、概述

  我们来说说标签的内外边距,内边距(padding),外边距(margin),我们先来看看这个标准的盒子模型吧,如图所示:

二、外边距

说明:我们外边距用margin样式来表示。外边框可以理解为,边框的扩展还需要占用多大的空间,也是上、下、左、右,分别是margin-top,margin-bottom,margin-left,margin-right。当然如果直接用margin的话,那外边距的扩展,上下左右都都会产生变化。

    
Title
高哥哥帅极了

显示的效果图:

然后我设置margin-top值之后:

里面的div和外面的div产生了上下产生了边距,随着我的margin-top的值不断扩大,则边距也越来越大:

所以说行外边距只的是本身的div没有高度和宽度没有变化,只是离父标签的高度有变化。

margin: 10px;  #上下左右边距都是:10pxmargin: 0 10px;   #上下边距:0,左右:10pxmargin: 0 10px  0 10px; #上:0 ,右:10px  ,下:0,左:10px

三、内边距

说明:我们内边距用padding来表示,是内容到边框的距离,可以有上、下、左、右,分别是padding-top,padding-bottom,padding-left,padding-right。当然如果直接用padding的话,那内边距的扩展,上下左右都都会产生变化。

    
Title
高哥哥帅极了

显示的效果图:

 

 然后我设置padding-top值之后:

 

 

其实div自己本身的高度没有变大:

 

所以说自己本身的div的高度没有变化,但是用的是拉长自己的边距。

padding: 10px;  #上下左右边距都是:10pxpadding: 0 10px;   #上下边距:0,左右:10pxpadding: 0 10px  0 10px; #上:0 ,右:10px  ,下:0,左:10px

 

转载于:https://www.cnblogs.com/zhangqigao/articles/8032567.html

你可能感兴趣的文章
Table显示滚动条
查看>>
Java基础第三天_数组
查看>>
PHP 中文汉字转换成拼音函数
查看>>
MySQL备份需要考虑的问题
查看>>
python基础(1)
查看>>
关于php7.0下Sqli-labs搭建的小问题
查看>>
股价飙升20%市值增长100亿,《纸牌屋》之父Netflix凭什么比他的竞争者要强12倍?...
查看>>
决心书
查看>>
SylixOS调试与性能分析技术--内存泄漏检测
查看>>
shell训练营Day15
查看>>
MySQL常用语句命令
查看>>
关于字符串的一些操作
查看>>
bootstrap-导航(垂直堆叠带分隔线的导航)
查看>>
安装tomcat-7.0.61图文
查看>>
游戏程序员的学习指南(必看)(二)
查看>>
手把手教你如何建立自己的Linux系统(LFS速成手册)
查看>>
初识 sqlite 与 content provider 学习笔记
查看>>
java--ftp的断点上传和断点下载
查看>>
11.SSH整合
查看>>
PowerShell记录脚本运行过程
查看>>