CSS-盒子边距设置

内边距 padding,指的是内容与边框之间的空隙

padding:后面跟数字就可以表示内边距

padding-top表示上方的内边距,

padding-bottom表示下方的内边距

padding-right表示右边的内边距,

padding-left表示左边的,

也可以 padding: 10px 5px 3px 1px,四个数值分别代表上方,右侧,下方,左侧

外边距:margin,指的是盒子之间的空隙

margin:后面跟数字就可以表示外边距

margin-top,margin-bottom,margin-right,margin-left分别表示上方,下方,右边和左边的外边距

margin:25px 50px 75px 100px;

表示上边距为25px,右边距为50px,下边距为75px,左边距为100px

margin:25px 50px 75px;

上边距为25px;左右边距为50px;下边距为75px

margin:25px 50px;

上下边距为25px;左右边距为50px

margin:25px;

所有的4个边距都是25px

代码

style>

p{

width:275px;

border:2px solid #0088dd;

padding:10px 50px 10px 1px;}

p.example{

margin:10px;}

</style>

<body>

<p>狗(拉丁文Canis lupus familiaris)属于脊索动物门、脊椎动物亚门、哺乳纲、真兽亚纲、食肉目、裂脚亚目、犬科动物。中文亦称“犬”,狗分布于世界各地。狗与马、牛、羊、猪、鸡并称“六畜”。有科学家认为狗是由早期人类从灰狼驯化而来,驯养时间在4万年前~1.5万年前,发展至今日。被称为“人类最忠实的朋友”,现如今是饲养率最高的宠物。其寿命约十多年。在中国文化中,狗属于十二生肖之一,在十二生肖中的第11位。</p>

<p class="example">狗(拉丁文Canis lupus familiaris)属于脊索动物门、脊椎动物亚门、哺乳纲、真兽亚纲、食肉目、裂脚亚目、犬科动物。中文亦称“犬”,狗分布于世界各地。狗与马、牛、羊、猪、鸡并称“六畜”。有科学家认为狗是由早期人类从灰狼驯化而来,驯养时间在4万年前~1.5万年前,发展至今日。被称为“人类最忠实的朋友”,现如今是饲养率最高的宠物。其寿命约十多年。在中国文化中,狗属于十二生肖之一,在十二生肖中的第11位。</p>

</body>

图示:

边距图示
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今日的羞辱,将成为明日的荣耀!不要怕失败,也不要怕吃苦。吃得苦中苦,主赐福上福。
    凌贤武阅读 195评论 0 0
  • 照一张比较暗图,特别是在暗部需要我们对其进行处理,提亮暗部有不让其他部位出现曝光的情况。这是一个比较简单处理图片的...
    zidea阅读 521评论 0 10
  • 1、大话SWOT SWOT框架是做战略分析的经典套路,甚至可以说是第一个进行战略分析的套路,其历史可以追溯到上世纪...
    常思行阅读 1,668评论 0 3
  • 每个成都攻略里都不会少的地方就是宽窄巷子,两条平行的巷子,一条名为宽巷,一条名为窄巷。但是成都有这么多句话“宽巷...
    语千阅读 255评论 0 0
  • 图/许溪墨 在日常中寻找属于自己的视角。 NO.1 小花 时不时给自己换一份干花,一种心情。 NO.2 手帐&小确...
    许溪墨阅读 580评论 13 20