第10课:外边距和内边距

上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。

  1. 为元素设置外边距
  2. 为元素设置内边距

为元素设置外边距

一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可以参考第9课的图示。

在下面这个例子中,我们将了解如何为文档本身(即body元素)定义外边距。下图显示了我们对外边距的要求。

外边距的示例

满足上述要求的CSS代码如下:

body {margin-top:100px;margin-right:40px;margin-bottom:10px;margin-left:70px;}

或者你也可以采用一种较优雅的缩写形式:

body {margin: 100px 40px 10px 70px;}

几乎所有元素都可以采用跟上面一样的方法来设置外边距。例如,我们可以为所有用<p>标记的文本段落定义外边距:

body {margin: 100px 40px 10px 70px;}p {margin: 5px 50px 5px 50px;}

为元素设置内边距

内边距(padding)也可以被理解成“填充物”。这样理解是合理的,因为内边距并不影响元素间的距离,它只定义元素的内容与元素边框之间的距离。

下面我们通过一个简单的例子来说明内边距的用法。在这个例子中,所有标题都具有背景色:

h1 {background: yellow;}
h2 {background: orange;}

通过为标题设置内边距,你可以控制在标题文本周围填充多少空白:

h1 {background: yellow;padding: 20px 20px 20px 80px;}
h2 {background: orange;padding-left:120px;}

小结

你正在逐步精通CSS盒状模型。在下一课,我们将进一步了解如何将边框设置为不同颜色、以及如何改变元素形状。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5244.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年2月25日 上午11:09
下一篇 2020年2月25日 下午2:56

99%的人还看了以下文章

  • CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after,我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…

    2019年1月5日 网页制作
    4.3K0
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    3.9K0
  • 一句代码给图片加倒影-CSS3

    本文使用纯CSS代码给图片加倒影,CSS代码 : img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示: 完整代码: &lt…

    2019年8月18日
    2.6K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    4.5K0
  • 实现网页全屏和退出全屏JS代码,多浏览器兼容

    实现网页全屏和退出全屏JS代码,兼容主流浏览器如:谷歌、火狐、360等。   <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t…

    2019年2月15日
    3.2K0
  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    2.3K0

发表回复

登录后才能评论