EspañolDeutschFrançaisItalianoPortuguêsРусскийΕλληνικά日本語中文(简体)हिन्दी; हिंदीالعربية
设置为默认语言
PF 问题 - 论坛

如何防止通过添加填充 HTML 元素大小增加

CSS 编程  
 
如何防止通过添加填充 HTML 元素大小增加

当我们与工作 HTML 和样式表 CSS 有时, 行为 我们正在设计的页面元素 是目前为止 你可能认为它将正确的事情. 在这些情况下, 我们不得不潜水 互联网 调查和询问他们放弃的可能 解决方案 这可以解决我们的问题.

在这种情况下, 我们要谈谈 行为 让他们 HTML 元素 当将它分配 填充. 假设你有一个元素 div 一个 宽度和高度的默认, 以像素为单位或百分比, 这给边缘更好地显示其尺寸:

正如你可以看到在 CSS 选项卡, 这个容器的 宽度 的一 75% 和一个人 高度100 像素.

现在, 我们将指派 填充20 像素 在每边:

我们可以看到,, 现在, 的 集装箱 提出了 填充 制作要分开边缘的文本, 但此外, 的 容器大小已经增加, 即, 现在有的高度和宽度的 40 更多的像素 由于 填充 分配给它的两侧.

为了避免这种, 我们将使用的属性 框大小 集装箱, 做如此 大小 同样的 包括 此外你 填充. 要做到这一点, 我们只需将值分配 框大小: 边界框 在 CSS 中, 并将得到以下结果:

以这种方式, 容器 将保持填充 分配, 的 20 像素, 而不会增加 他们 尺寸 先前定义.

这只是为了表明, 元素,也会发生 输入 形式, 究竟是, 要匹配他们所需的设计, 我们应该有一点 技能.

我们要去 添加 元素 输入键入文本代码 我们已经有了, 和我们将配置 输入 一个 宽度 的的 100% 从父容器, 和 填充5 像素 上部和下部方, 和 10 像素 为右和左.

会发生什么? 为我们的新 元素 输入 维度 从父容器, 甚至有他设置宽度 100%. 如何修复它? 因为同样的我们一样与其容器, 我们要去 他指派 该属性 框大小边界框:

瞧 !! 在这里我们看到作为 使用属性 框大小 并指派他 价值 边界框, 我们可以这样做 HTML 元素 我们的网站是 非常适合, 在 大小, 为您分配这些值, 避免 , 这些 成长分配 某种类型的 填充 给他们.

我们的留言或输入到论坛
Share on Facebook Tweet about this on Twitter Share on Google+ Pin on Pinterest Share on Reddit Share on VK Share on StumbleUpon Share on Tumblr Share on LinkedIn Email this to someone Print this page