freeCodeCamp Basic CSS 实战用 margin-top/right/bottom/left 为元素四边设置不同的外边距【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇基于 freeCodeCamp 课程basic-css块中的挑战《Add Different Margins to Each Side of an Element》讲解如何用margin-top、margin-right、margin-bottom、margin-left四个属性分别控制元素四条边的外边距并完整给出该挑战的初始代码、四条测试断言与标准解法。读完你可以独立完成上下左右不同边距的 CSS 布局并理解 freeCodeCamp 挑战题的验收方式window.getComputedStyle精确匹配像素值。挑战在课程中的位置该挑战的定义文件位于 bad87fee1248bd9aedf08824.md其 front matter 元数据如下id: bad87fee1248bd9aedf08824 title: Add Different Margins to Each Side of an Element challengeType: 0 dashedName: add-different-margins-to-each-side-of-an-element在 basic-css.json 的challengeOrder中它排在第 19 位索引从 0 计处于 margin 知识段的收尾位置第 16 位Adjust the Margin of an Element —— 用单个margin值设置四边相同的外边距第 17 位Add a Negative Margin to an Element —— 负值 margin 让元素长大第 18 位Add Different Padding to Each Side of an Element —— padding 的分边写法第 19 位本文主角Add Different Margins to Each Side of an Element第 20 位Use Clockwise Notation to Specify the Padding of an Element第 21 位Use Clockwise Notation to Specify the Margin of an Element —— 用一行四值简写替代四条分边声明。也就是说学完本挑战后下一题就会把这里的四条声明压缩为margin: 40px 20px 20px 40px;的顺时针简写两者数值刻意保持一致方便对照。核心概念四个分边 margin 属性挑战正文给出的概念说明是Sometimes you will want to customize an element so that it has a differentmarginon each of its sides. CSS allows you to control themarginof all four individual sides of an element with themargin-top,margin-right,margin-bottom, andmargin-leftproperties.即当四条边需要不同外边距时不能使用单值的margin: 40px那会让四边相同而要改用四个独立的长写属性。它们各自只影响对应一侧属性作用边本挑战目标值margin-top上边40pxmargin-right右边20pxmargin-bottom下边20pxmargin-left左边40px任务指令--instructions--要求把蓝色盒子.blue-box的上、左边距设为40px下、右边距设为20px。初始代码Seed该挑战自带的完整初始代码如下来自定义文件中的--seed--段黄色盒内嵌着红色与蓝色两个盒子.injected-text标题用了margin-bottom: -25px的负边距把文字拉进盒子上沿——这正是前一个负边距挑战内容的延续style .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: crimson; color: #fff; margin-top: 40px; margin-right: 20px; margin-bottom: 20px; margin-left: 40px; } .blue-box { background-color: blue; color: #fff; } /style h5 classinjected-textmargin/h5 div classbox yellow-box h5 classbox red-boxpadding/h5 h5 classbox blue-boxpadding/h5 /div注意一个细节.red-box已经写好了目标样式上/左 40px、右/下 20px它就是本题的参照物——题目本质是让你让.blue-box复制红色盒子的四边边距使两个盒子的外边距表现一致。验收方式四条 getComputedStyle 断言该挑战的--hints--段同时承担了提示与判题标准的角色共四条断言每条读取.blue-box的计算样式并做精确字符串比对const blueBox document.querySelector(.blue-box); const marginTop window.getComputedStyle(blueBox)[margin-top]; assert.strictEqual(marginTop, 40px);const blueBox document.querySelector(.blue-box); const marginRight window.getComputedStyle(blueBox)[margin-right]; assert.strictEqual(marginRight, 20px);const blueBox document.querySelector(.blue-box); const marginBottom window.getComputedStyle(blueBox)[margin-bottom]; assert.strictEqual(marginBottom, 20px);const blueBox document.querySelector(.blue-box); const marginLeft window.getComputedStyle(blueBox)[margin-left]; assert.strictEqual(marginLeft, 40px);这里有两个值得注意的判题要点逐边独立检查四条断言分别针对四个长写属性因此即使你用margin: 40px 20px 20px 40px一行简写浏览器计算出的margin-top等长写值仍是对应像素同样能通过但仅靠margin: 40px或margin: 20px单值写法必然失败。精确匹配像素字符串assert.strictEqual比较的是40px这样的完整字符串单位不能省略、数值不能偏差这要求你严格写出40px/20px。标准解法定义文件中给出的官方解法--solutions--段是在.blue-box中补入四条分边声明其余部分保持不变style .injected-text { margin-bottom: -25px; text-align: center; } .box { border-style: solid; border-color: black; border-width: 5px; text-align: center; } .yellow-box { background-color: yellow; padding: 10px; } .red-box { background-color: crimson; color: #fff; margin-top: 40px; margin-right: 20px; margin-bottom: 20px; margin-left: 40px; } .blue-box { background-color: blue; color: #fff; margin-top: 40px; margin-right: 20px; margin-bottom: 20px; margin-left: 40px; } /style h5 classinjected-textmargin/h5 div classbox yellow-box h5 classbox red-boxpadding/h5 h5 classbox blue-boxpadding/h5 /div对比初始代码唯一的差异就是.blue-box新增的四行margin-*声明与.red-box完全对应。与相邻挑战的关系与延伸本挑战所处的 margin 小系列共享同一套三色嵌套盒演示模板各自考察 margin 的一个侧面Adjust the Margin of an Element定义文件margin 控制元素border与周围元素之间的空间单值写法让四边一致Add a Negative Margin to an Element定义文件把 margin 设为负值如-15px元素会长大、占据更多空间seed 里的.injected-text { margin-bottom: -25px; }就是活例子Add Different Padding to Each Side of an Element定义文件padding 的四边独立写法padding-top/right/bottom/left与本挑战的 margin 四边写法结构对称容易混淆注意 margin 是边框外的间距、padding 是边框内的留白Use Clockwise Notation to Specify the Margin of an Element定义文件本挑战的续集要求改用一行顺时针四值margin: 40px 20px 20px 40px;得到完全相同的效果。从该相邻挑战的说明可以确认四值顺序即 top、right、bottom、left上、右、下、左与钟表顺时针方向一致。小结需要为四条边分别指定外边距时使用margin-top、margin-right、margin-bottom、margin-left四个长写属性本挑战的目标值是上40px、右20px、下20px、左40px与 seed 中.red-box的参照样式一致判题通过window.getComputedStyle逐边读取计算样式并精确匹配像素字符串因此数值与单位都必须严格正确掌握分边写法后可进一步学习顺时针四值简写下一挑战它是四个长写声明的等价压缩形式。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考