padding和margin起到的效果(2个地方)

padding和margin起到的效果(2个地方)

1.container{width: 100%;margin-left: auto;margin-right: auto;padding-left: 15px;padding-right: 15px;}

padding-left: 15px;padding-right: 15px;是为了什么效果?

2.row {margin-left: -15px;margin-right: -15px;}

这里的margin-left: -15px;margin-right: -15px;我知道是缩小15px,不知道是为了什么效果?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,问题解答如下:

1、container中设置左右padding值是为了阻止内部内容触碰到边界

http://img1.sycdn.imooc.com//climg/5e60a1c709d6b8ba01610055.jpg

2、row的左右margin都为-15px,用来抵消container中的padding值。因为container盒子设置了盒模型为border-box,padding值会占据设置的宽度,实际内容宽度变小,所以子元素设置了margin值为负值。

祝学习愉快!

  • 迷失的小麦 提问者 #1
    不知道这样折腾有什么意义
    2020-03-05 17:08:35
  • 迷失的小麦 提问者 #2
    而且为什么先padding后margin,不是同时margin或是padding
    2020-03-05 17:13:16
好帮手慕星星 2020-03-05 19:28:57

同学你好,是为了保证元素内容不挨边并且整体container盒子是居中显示的,所以先用了padding,然后子元素用margin弥补padding占据的位置。

如果先使用margin,盒子不会水平居中显示了,自己可以测试理解下。这里的封装和bootstrap.css中类似,使用的时候拿来用就好。

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师