Flutter基础(前端教程①⑨-margin-padding)

比喻:把框的盒子

Container 想象成一个带边框的盒子

  • margin盒子外面的空白(盒子与周围其他东西的距离)。
  • padding盒子里面的空白(盒子边框与内部内容的距离)。

代码示例(带边框更直观):

Dart 复制代码
Container(
  // 盒子外部的空白(与其他组件的距离)
  margin: EdgeInsets.all(20), 
  // 盒子内部的空白(边框与文本的距离)
  padding: EdgeInsets.all(15),
  // 给盒子加个边框,方便看清
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 2), // 黑色边框
    color: Colors.yellow, // 盒子背景色
  ),
  child: Text("我是内部文本"),
)
相关推荐
人工智能训练3 小时前
【极速部署】Ubuntu24.04+CUDA13.0 玩转 VLLM 0.15.0:预编译 Wheel 包 GPU 版安装全攻略
运维·前端·人工智能·python·ai编程·cuda·vllm
会跑的葫芦怪3 小时前
若依Vue 项目多子路径配置
前端·javascript·vue.js
pas1366 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
摇滚侠6 小时前
2 小时快速入门 ES6 基础视频教程
前端·ecmascript·es6
珑墨7 小时前
【Turbo】使用介绍
前端
军军君017 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
打小就很皮...8 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr
wuhen_n9 小时前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon9 小时前
理解vue中的ref
前端·javascript·vue.js
落霞的思绪11 小时前
配置React和React-dom为CDN引入
前端·react.js·前端框架