css边距和填充示例代码,CSS3-我们可以在CSS中定义最小边距和最大边距，最大填充和最小填充吗？...

理想情况下，CSS容器中的边距应该折叠，因此您可以定义一个父容器，将其边距设置为所需的最小值，然后将所需的边距用于子对象，子对象的内容将 使用父级和子级之间的较大边距：

如果子级边距小于父级边距+填充，则子级边距将无效。

如果子边距大于父边距+填充，则应增加父边距以适合。

这仍然经常无法按CSS的预期工作：当前CSS仅允许父级定义NO填充和NO边框，并且仅允许父级的边距折叠到父级的边距(必要时扩展)。 子级与父级内容框的开头之间的父级中不存在中间同级内容； 但是，可能会有浮动或定位的同级元素，在计算边距时会被忽略，除非它们使用“ clear：”来扩展父级的内容框并完全将其自身的内容垂直地放入其中(仅父级的内容高度为- 框增加了其内容框的从上到下或从下到上的块方向，或者仅增加了父块的宽度，从左到右或从右到左的块方向；内联方向 父母的content-box中的任何元素都不起作用)。

因此，如果父级仅定义1px的填充或边框仅1px，则这将阻止子级将其边距折叠为父级的边距。 相反，子级边距将从父级的内容框(或中间同级内容的边框，如果有)生效。 这意味着，子级将父级中的任何非空边框或非空填充都视为该父级中的同级内容。

因此，这种简单的解决方案应该起作用：使用没有任何边框或填充的附加父元素来设置将子元素嵌套在其中的最小边距； 您仍然可以在子项上添加边框或填充(如果需要)，在其中定义子项的辅助边距(合并到父项的边距)！

请注意，子元素可能会将其边距折叠为多个级别的父元素！ 这意味着您可以定义多个最小值(例如，对于3个值之间的最小值，请使用两个级别的父级来包含子级)。

有时需要考虑3个或更多的值：视口宽度，文档宽度，节容器宽度，容器中是否存在外部浮标窃取空间以及子内容本身所需的最小宽度。所有这些宽度可能是可变的，并且可能还取决于所使用的浏览器的类型(包括其可访问性设置，例如文本缩放或渲染器中大小的“ Hi-DPI”调整，具体取决于目标查看设备的功能，有时因为可以通过用户调整布局的选择，例如个人“皮肤”或其他用户的偏好设置，或者最终渲染主机上的可用字体集，这意味着很难安全地预测确切的字体大小，以匹配“像素”(用于图像或边框)；如果打印和方向，则用户具有各种屏幕尺寸或纸张尺寸；滚动甚至也无法或不可能进行补偿，溢出内容的截断通常是不可取的；并且使用过多的“空白”浪费了空间，并使呈现的文档难以访问。

我们需要节省空间，而又不打包太多信息并保持读者的清晰度，并且易于导航：布局是一种持续的折衷方案，既要节省空间又要立即显示更多信息，以避免额外的滚动或导航到其他页面，并保持 显示的打包信息易于浏览或与之交互)。

但是，HTML常常不足以实现所有目标的灵活性，即使HTML提供了一些高级功能，它们也难以编写或维护/更改文档(或它们包含的信息)，或者以后为了其他目标或演示文稿而将内容重新适应。 。 使事情保持简单可以避免此问题，如果我们使用这些几乎没有成本并且易于理解的简单技巧，则应该使用它们(这将总是节省很多宝贵的时间，包括对于Web设计人员而言)。