登录  /  注册
首页 > web前端 > css教程 > 正文

HTML CSS——margin和padding的学习

巴扎黑
发布: 2017-06-28 14:26:47
原创
1327人浏览过

你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距。呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解:

        一、什么是边距

        CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间)。

       二、什么是内边距,什么是外边距

        代码2-1:


  1. nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  2. html xmlns="http://www.w3.org/1999/xhtml">

  3.     head>

  4.         meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

  5.         style type="text/css">

  6.             body{  

  7.                 margin:0px;  

  8.             }  

  9.             .test1{  

  10.                 width:150px;  

  11.                 height:150px;  

  12.                 border:6px solid red;  

  13.             }  

  14.             .test2{  

  15.                 margin-top:40px;  

  16.                 padding-top:40px;  

  17.                 width:150px;  

  18.                 height:150px;  

  19.                 border:6px solid gray;  

  20.             }  

  21.             .test2_son{  

  22.                 width:80px;  

  23.                 height:50px;  

  24.                 border:12px solid blue;  

  25.             }  

  26.         style>

  27.     head>

  28.     body>

  29.         p class="test1">test1p>

  30.         p class="test2">

  31.             p class="test2_son">test2_sonp>

  32.         p>

  33.     body>

  34. html>


图01

        说明:图01中灰色地带是class值为test2的p的边框,它是有宽度的;

        ①、外边距:外边距指的是margin作用元素(这里是class值为test2的p)边框外延距离另一个元素边框外延(如果另一个元素和margin作用元素同级(这里是class值为test1的p))或内延(如果另一个元素是margin作用元素父级)的距离,如上图;

        ②、内边距:内边距指的是margin作用元素(这里是class值为test2的p)边框内延距离其子元素边框外延的距离,如上图;

        ③、内边距和外边距是针对于其作用的元素和其他元素来讲的,某一元素的内边距在另一个元素看来有可能是外边距,比如:class值为test2 p的内边距在class值为test2_test p元素看来就是外边距,所以上面代码也可以这样写:将class值为test2的p样式列表中“padding-top:40px;”去掉,class值为test2_test p元素添加“margin-top:40px;”——这样的效果和代码2-1是一样的;

        三、margin和padding的属性

        ①、它们的默认值都是0;它们的属性值都可以为auto——margin作用的元素由浏览器计算外边距,padding作用的元素由浏览器计算内边距;都 可通过设定属性值为inherit而继承父元素边距——margin继承父元素外边距,padding继承父元素内边距,但由于inherit在任何的版 本的 Internet Explorer (包括 IE8)都不支持,所以也就没有学习的必要了。

        ②、margin允许指定负的外边距值,不过使用时要小心;padding不允许指定负边距值;

        ③、margin和padding的属性值都可以有1个、2个、3个和4个:

                a、margin有4个属性值(例如margin:10px 5px 15px 20px;), 其含义是:上外边距10px、右外边距5px、下外边距15px、左外边距20px;

                      padding有4个属性值(例如padding:10px 5px 15px 20px;),其含义是:上内边距10px、右内边距5px、下内边距15px、左内边距20px;

                      总结:无论是margin还是padding,如果有4个属性值,那么它们的作用方向顺时针  依次为上、右、下、左;

                b、margin有3个属性值(例如margin:10px 5px 15px ;), 其含义是:上外边距10px、右外边距和左外边距5px、下外边距15px;

                      padding有3个属性值(例如padding:10px 5px 15px;),其含义是:上内边距10px、右内边距和左内边距5px、下内边距15px;

                      总结:无论是margin还是padding,如果有3个属性值,那么它们的作用方向顺时针  依次为上、右左、下;

                c、margin有2个属性值(例如margin:10px 5px;), 其含义是:上外边距和下外边距10px、右外边距和左外边距5px;

                      padding有2个属性值(例如padding:10px 5px;),其含义是:上内边距和下内边距10px、右内边距和左内边距5px;

                      总结:无论是margin还是padding,如果有2个属性值,那么它们的作用方向顺时针  依次为上下、右左;

                d、margin有1个属性值(例如margin:10px;), 其含义是:4 个外边距都是 10px;

                      padding有1个属性值(例如padding:10px;),其含义是:4 个内边距都是 10px;

                      总结:无论是margin还是padding,如果有1个属性值,那么它们的边距值都是相等的;

以上就是HTML CSS——margin和padding的学习的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号