设置填充是否会更改 Android 或 IOS 上的视图大小？答案

【问题标题】：Does set padding change view size on Android or IOS?设置填充是否会更改 Android 或 IOS 上的视图大小？
【发布时间】：2019-11-12 07:03:49
【问题描述】：

我正在研究 padding 的工作原理，并在 Android、IOS、Web 之间进行比较。

在这种情况下。在每个平台中，我应该为 Item 设置多少宽度？

如果您在您熟悉的平台（Web/Android/IOS）上留下答案会很有帮助。

【问题讨论】：

也许你应该从the basics开始。

标签： android ios css

【解决方案1】：

网上：

这取决于您应用填充的元素的box-sizing 属性。该属性实际上可以具有值content-box 或border-box（也可以具有initial 和inherit，但最后还是会应用前两个）。使用 content-box 时，实际大小会通过填充和边框增加，而 border-box 则不会：

.box {
  width: 300px;
  height: 50px;
  margin: 10px auto;
  background-color: #eee;
  padding: 20px;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}

<div class="box content-box"> Content Box </div>
<div class="box border-box"> Border Box </div>

当使用content-box时，渲染元素的实际宽度将是width、padding和border属性值的总和。对于border-box，它将等于width 属性。在这种情况下，填充和边框在视觉上保持在定义的width 边界的“内部”。您可以在此处阅读有关差异的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

结论：

您可以使用content-box 和335px 宽度，或border-box 和375px 宽度作为示例。两者都是可能的，虽然border-box 在我看来更直观并且有助于防止错误。

【讨论】：

【解决方案2】：

将您的视图宽度设置为 match_parent

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text" />

【讨论】：