现两者之间的和谐现在，

suraiyaislamsum

书中页面的比例与大多数数字显示器（尤其是横向显示器）的比例有很大不同，因此为了使这一概念适应网络，我们可以努力实现文本与其直接视觉容器之间的和谐。 在实践中 ＃ 在我们的示例页面上，边距不是很大。此外，主要内容挤在两个非常响亮的栏之间。首先，我们可以在文本右侧添加更多空间，为读者提供从一行末尾到下一行开头的空间，而不会被右侧的次要内容分散注意力。在文本左侧添加更多边距可以让读者轻松找到下一行的开头，并浏览文章以查找他们感兴趣的主题。 可以通过增加每一侧的数量来直观地设置边距，直到内容感觉舒适为止。通过添加 CSS（而不是在本例中），可以轻松地将其应用于我们的article元素。现在，我们将左右加倍：paddingmargin。

padding article { padding-left: 20px; padding-right: 40px; } 复制 在调整边距时，我们可以在副本与其周围环境之间创造更大的和谐，但首先我们必须在内容周围想象出一个不可见的容器。这将是我们在阅读区建立和谐的“页面”： 在文本与其容器之间创建和谐 购买电话号码列表 比例的方法是使它们具有相同的形状。内容应与其包含元素具有相同的比例（只是较小）。Tschichold 调查了大量的书籍比例，得出的结论是，一本书的左页（右页）的页边距最和谐的比例大约为 2:3:4:6（上：右：下：左）。鉴于网络上没有对开页，我们可以使页边距对称，并通过削掉一些左边距将比例调整为 2:3:4:3。网络文本不需要像书籍文本那样多的侧边距，因为网页不需要容纳读者的拇指。 尽管它们看起来可能是明显的测量单位，但百分。



比padding只会根据元素容器的宽度article进行测量，从而将顶部、底部和侧面的比例倾斜到不适当的程度。因此，最好使用paddingem 或像素，直到读取区域与其容器具有相同的比例。为了简单起见，我们在示例中从 2em 开始顶部填充。应用上面调整后的比率后，我们的article可以padding写成 CSS 简写形式2em 3em 4em 3em或2em 3em 4em。鉴于网络内容的流动性，这只是齐休比例的近似值。对于网络上的典型文本正文（高度大于宽度），顶部的边距通常应较少，甚至侧面也应较少，而底部的边距最多： article { padding: 2em 3em 4em; } 复制 我们还可以将主图像移至右侧。这使得正文可以更好地保持其形状，并且可以更轻松地扫描文章。当然，我们可以打破这一原则来吸引人们对图像和图形。