margin、padding、tint、hint不想再混乱了

最新推荐文章于 2021-04-06 15:52:19 发布
原创 最新推荐文章于 2021-04-06 15:52:19 发布 · 837 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解释了 CSS 中的关键术语，包括 margin（外边距）、padding（内边距）、border（边框）及 align（对齐）。通过直观的图片说明与清晰的文字描述，帮助读者更好地理解这些 UI 控制名词。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

margin 英['mɑ:dʒɪn] 美[ˈmɑrdʒɪn] 

意思是：栏外，页边空白，边缘。一般是指容器中元素和元素/容器边缘之间的空白。所以通常叫它：外边距。

padding 英[ˈpædɪŋ] 美[ˈpædɪŋ]

意思是：衬垫，填料。一般是指元素中元素内容和元素边缘之间的空白。所以通常叫它：填充，内边距。

border 英['bɔ:də(r)] 美[ˈbɔrdɚ]

意思是：包边，边界。一般是指元素的边框。所以通常叫它：边框。

align 英[əˈlaɪn] 美[əˈlaɪn]

意思是：排整齐，使成一线。一般是指元素之间的对齐方式。所以通常叫它：对齐。


百科上有人总结说：padding就是内容与边框的空隙，而margin 则是模块与模块的空隙。

下面一张图可以更直观的理解：


刚接触这些UI控制名词时，很容易乱，所以要仔细理解一下。

hint 英[hɪnt]  美[hɪnt]

意思是：暗示，提示。指输入框等的提示文字

tint 英[tɪnt]  美[tɪnt]

意思是：色彩，着色。指控件的着色




巧记复合属性margin/padding四个方向
资深程序员
07-04 6734
padding复合属性： padding:上 右 下 左; 看完四个方向后，幻想一个钟表，指针正在按照顺时针走。 上右下左，这不就是padding四个方向吗。
浅谈 Android L 的 Tint（着色）
liz3002的专栏
01-28 2400
浅谈 Android L 的 Tint（着色）Tint 是什么？Tint 翻译为着色。着色，着什么色呢，和背景有关？当然是着背景的色。当我们开发 App 的时候，如果使用了 Theme.AppCompat 主题的时候，会发现 ActionBar 或者 Toolbar 及相应的控件的颜色会相应的变成我们在 Theme 中设置的 colorPrimary， colorPrimaryDark， color
从零开始学_JavaScript_系列（六）——CSS的padding、margin、border属性超详细解释（图文）...
weixin_34354173的博客
04-08 372
结论请看最后的图片 关于定义： margin：层的边框以外留的空白 background-color：背景颜色 background-image：背景图片 padding：层的边框到层的内容之间的空白 border：边框 content：内容 关于四个方向： 先上图： 测试：（有些结论是验证后copy现有的，因为纯测试不可能推出必然结...
关于zxing设置hints.put(EncodeHintType.MARGIN, 0)无明显效果的探究
niuzhucedenglu的博客
11-09 2万+
zxing设置hints.put(EncodeHintType.MARGIN, 0)无明显效果
EditText组件drawableLeft属性设置的图片和hint设置的文字之间的距离
坐忘峰
09-16 3万+
有的时候，我们需要在文本框里放置icon图片，并且设置默认提示文字的时候，需要设置两者之间的间距，如下图：                    这里想设置的就是之前的手机icon和”请输入手机号“之间的距离，则可是使用以下的方式：               android:id="@+id/tel_num"     android:layout_width="match_parent
Android之输入框光标和Hint的位置
weixin_30776273的博客
12-30 730
如图所示，要实现这一的需求，一般人的布局方式就是左边一button，右边一button，中间一个EditText，为了输入框的响应触摸范围更大往往不会把宽度设置为wrap_content，要么设置成match_parent/fill_parent要么给定个minWidth+wrap_content。 无论如何布局，gravity或layout_gravity都应是center才能达到需求所示...
Android ImageView的Tint属性
u013252110的博客
07-30 6182
Android Tint使用 Tint 属性 　　Tint 是 Android5.0 引入的一个属性，它可以在Android5.0 系统上，对视图进行颜色渲染。  下面是网上一个使用tint属性给背景调整不同颜色的例子： <LinearLayout android:orientation="horizontal" android:layout...
Android简单控件的使用
weixin_43916678的博客
04-06 1037
简单控件的使用 TextView TextView控件用于显示文本信息 TextView常用属性 属性名称 功能描述 android:layout_width 设置控件的宽度 android:layout_height 设置控件的高度 android:id 设置控件的唯一标识 android:background 设置控件的背景 android:layout_margin 设置控件与屏幕边界或周围控件、布局的距离 android:padding 设置控件与该控件中内容的距
明日科技后台css文件
hyty的博客
11-17 1123
admin.css /** * admin.css */ ul { margin-top: 0; } .admin-icon-yellow { color: #ffbe40; } .admin-header { font-size: 1.4rem; margin-bottom: 0; } .admin-header-list a:hover :after { con...
利用JavaScript实现京东自动叠蛋糕+淘宝自动领喵币，叠列车+618全民购物
nuandon的博客
06-05 1157
京东自动叠蛋糕|淘宝自动领喵币，叠列车|618全民购物|JavaScript 行环境 安卓 JavaScript运行软件 Auto.js "ui"; var color = "#009688"; main(); function main() { ui.layout( <drawer id="drawer"> <vertical> <appbar>
( 持续更新，目前含 200+ 工具类 ) DevUtils 是一个 Android 工具库, 主要根据不同功能模块，封装快捷使用的工具类及 API 方法调用。
afkT 的博客
09-24 5409
About DevUtils 是一个 Android 工具库, 主要根据不同功能模块，封装快捷使用的工具类及 API 方法调用。 该项目尽可能的便于开发人员，快捷、快速开发安全可靠的项目，以及内置部分常用的资源文件，如color.xml、(toast) layout.xml等 Gradle Step 1. Add the JitPack repository to your build fil...
package com.example.kucun2.entity; public class Bancai { private Integer id; private Caizhi caizhi; private Mupi mupi1; private Mupi mupi2; private Double houdu; public Bancai() { } public Bancai(Integer id, Caizhi caizhi, Mupi mupi1, Mupi mupi2, Double houdu) { this.id = id; this.caizhi = caizhi; this.mupi1 = mupi1; this.mupi2 = mupi2; this.houdu = houdu; } public Integer getId() { return id; } public Caizhi getCaizhi() { return caizhi; } public Mupi getMupi1() { return mupi1; } public Mupi getMupi2() { return mupi2; } public Double getHoudu() { return houdu; } public void setId(Integer id) { this.id = id; } public void setCaizhi(Caizhi caizhi) { this.caizhi = caizhi; } public void setMupi1(Mupi mupi1) { this.mupi1 = mupi1; } public void setMupi2(Mupi mupi2) { this.mupi2 = mupi2; } public void setHoudu(Double houdu) { this.houdu = houdu; } } package com.example.kucun2.entity; import java.util.List; public class Caizhi { private Integer id; private String name; private List<Bancai> bancais; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public List<Bancai> getBancais() { return bancais; } public void setBancais(List<Bancai> bancais) { this.bancais = bancais; } public Caizhi() { } public Caizhi(Integer id, String name, List<Bancai> bancais) { this.id = id; this.name = name; this.bancais = bancais; } } package com.example.kucun2.entity; import java.util.List; public class Chanpin { private Integer id; private String name; private List<Chanpin_Zujian> zujians; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public List<Chanpin_Zujian> getZujians() { return zujians; } public void setZujians(List<Chanpin_Zujian> zujians) { this.zujians = zujians; } public Chanpin() { } } package com.example.kucun2.entity; public class Chanpin_Zujian { private Integer id; private Chanpin chanpin; private Zujian zujian ; private Double one_several; private Bancai bancai; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Chanpin getChanpin() { return chanpin; } public void setChanpin(Chanpin chanpin) { this.chanpin = chanpin; } public Zujian getZujian() { return zujian; } public void setZujian(Zujian zujian) { this.zujian = zujian; } public Double getOne_several() { return one_several; } public void setOne_several(Double one_several) { this.one_several = one_several; } public Bancai getBancai() { return bancai; } public void setBancai(Bancai bancai) { this.bancai = bancai; } public Chanpin_Zujian() { } } package com.example.kucun2.entity; import java.util.List; public class Dingdan { private Integer id; private String number; private List<Dingdan_Chanpin> chanpins; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getNumber() { return number; } public void setNumber(String number) { this.number = number; } public List<Dingdan_Chanpin> getChanpins() { return chanpins; } public void setChanpins(List<Dingdan_Chanpin> chanpins) { this.chanpins = chanpins; } public Dingdan() { } } package com.example.kucun2.entity; public class Dingdan_Bancai { private Integer id; private Dingdan dingdian; private Chanpin_Zujian zujian; private Bancai bancai; private Integer shuliang; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Dingdan getDingdian() { return dingdian; } public void setDingdian(Dingdan dingdian) { this.dingdian = dingdian; } public Chanpin_Zujian getZujian() { return zujian; } public void setZujian(Chanpin_Zujian zujian) { this.zujian = zujian; } public Bancai getBancai() { return bancai; } public void setBancai(Bancai bancai) { this.bancai = bancai; } public Integer getShuliang() { return shuliang; } public void setShuliang(Integer shuliang) { this.shuliang = shuliang; } public Dingdan_Bancai() { } } package com.example.kucun2.entity; public class Dingdan_Chanpin { private Integer id; private Dingdan dingdan; private Chanpin chanpin; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Dingdan getDingdan() { return dingdan; } public void setDingdan(Dingdan dingdan) { this.dingdan = dingdan; } public Chanpin getChanpin() { return chanpin; } public void setChanpin(Chanpin chanpin) { this.chanpin = chanpin; } public Dingdan_Chanpin() { } } package com.example.kucun2.entity; public class Kucun { private Integer id; private Integer shuliang; private Bancai bancai; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Integer getShuliang() { return shuliang; } public void setShuliang(Integer shuliang) { this.shuliang = shuliang; } public Bancai getBancai() { return bancai; } public void setBancai(Bancai bancai) { this.bancai = bancai; } public Kucun() { } public Kucun(Integer id, Integer shuliang, Bancai bancai) { this.id = id; this.shuliang = shuliang; this.bancai = bancai; } } package com.example.kucun2.entity; import java.util.List; public class Mupi { private Integer id; private String name; private List<Bancai> bancais; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public List<Bancai> getBancais() { return bancais; } public void setBancais(List<Bancai> bancais) { this.bancais = bancais; } public Mupi() { } public Mupi(Integer id, String name, List<Bancai> bancais) { this.id = id; this.name = name; this.bancais = bancais; } } package com.example.kucun2.entity; public class Zujian { private Integer id; private String name; public Zujian() { } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } } Android Studio2024 ，在fragment建立一个带有搜索框查询库存的表格，有弹窗可以添加板材木皮材质 数据来自api 依赖表需要
最新发布
06-05
bottom"android:layout_margin="16dp"android:src="@drawable/ic_add"/></LinearLayout>```接下来，创建库存条目的布局`item_inventory.xml`（根据Kucun实体）：```xml<LinearLayout...><TextViewandroid:id="@+id/...
Android TextInputLayout 设置 hint 和 EditText 之间的距离的 1 种解决方案
Keep Learning , Keep Improving !
09-22 1万+
在EditText设置自定义背景的时候，很明显的出现 hint和EditText之间的距离一点都没有，确实有点不太美观 试验一些方法不行。。。希望有眼前一亮的方法，tell me 现在个人是从drawable的shape_edit_item_bg_select_with_padding.xml入手 &lt;?xml version="1.0" encoding="utf-8"?&g...
Android background tint颜色渲染
lintcgirl的博客
05-26 3万+
该篇文章主要是讲Android颜色渲染，首先先来看看PorterDuff，对绘图非常重要。 PorterDuff的由来： 相信大多数人看到这个ProterDuff单词很奇怪了吧，这肿么个意思呢,然后就用有道啊，金山啊开始翻译，但是翻译软件给出的结果肯定还是 ProterDuff或者”未找到”. 这是神马情况呢？因为ProterDuff是两个人名的组合: Tomas Proter和 Tom D
TintColor是什么?
globalYK的博客
12-14 1511
1.如果我们想指定整个App的tint color，则可以通过设置window的tint color。这样同一个window下的所有子视图都会继承此tint color。  2.当弹出一个alert或者action sheet时，iOS7会自动将后面视图的tint color变暗。此时，我们可以在自定义视图中重写tintColorDidChange方法来执行我们想要的操作。  3.有些复杂控件
Glide使用详解（一）
热门推荐
商明超的专栏
04-12 16万+
Glide使用 Glide使用教程 Glide详解 Android图片加载 一. 下载在build.gradle中添加依赖： compile 'com.github.bumptech.glide:glide:3.7.0'需要support-v4库的支持，如果你的项目没有support-v4库(项目默认已经添加了)，还需要添加s
Unable to add window崩溃分析
商明超的专栏
03-21 2万+
显示Dialog时，我们通常会将Activity实例传给Dialog，然后调用Dialog的show方法显示。但在一些情况下，比如说先通过异步网络请求请求数据，等拿到数据后再调用Dialog的show方法显示Dialog来告诉用户已经拿到数据了，但是，我们偶尔会发现发生这样的程序崩溃： android.view.WindowManager$BadTokenException: Unable to
Android权限管理详解
商明超的专栏
04-21 2万+
概述Android安全架构规定：默认情况下，任何应用都没有权限执行对其他应用、操作系统或用户有不利影响的任何操作。这包括读写用户的私有数据（如联系人或电子邮件等）、读写其他应用的文件、执行网络访问、使设备保持唤醒状态等等。 如果要使用这些受保护的设备功能，首先要在应用的清单文件(AndroidManifest.xml)中添加一个或多个 <uses-permission>标记： <manifest
Android Tint 实例教程与应用案例
通过使用Tint，开发者可以在不改变原始资源的情况下，对控件的颜色进行修改，从而达到视觉上的改变和主题的统一。 ### 知识点一：Tint属性的基本概念 Tint属性可以在XML布局文件中通过`android:tint`属性直接应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值