我想在 CSS 中偏移 1 列内容。我认为就像执行以下操作一样简单。现在,这确实偏移了顶部,但它使第二列与第一列的高度(包括边距)匹配。我还能如何偏移第一列?
https://jsbin.com/delobaluga/edit?html,css,输出
.grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; } .grid .item:first-child { margin-top: 105px; } <div class='grid'> <div class='item'></div> <div class='item'></div> </div>
P粉7908197272024-04-03 00:22:48
如果要偏移第一列,同时保持第二列的高度不受影响,可以在第一列上使用内边距而不是边距。 padding影响元素的内容区域,而margin影响周围区域,所以如果你给第一列添加padding,它会增加它的大小并偏移其中的内容,但不会影响第二列的高度。 p>
这是经过此改进的代码:
.grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; } .grid .item:first-child { padding-top: 105px; }