超链接内嵌div未填满空间：区块颜色截断问题求助

学习HTML时遇到一个布局问题：当用<a>标签嵌套<div>元素时，区块的背景颜色出现截断。

预期效果：

实际显示效果（右侧第二个蓝色区块）：

奇怪的是，鼠标悬停在颜色缺失区域时仍能触发跳转，请问这是什么原因？

1. 元素类型不匹配：<a>标签默认是行内元素，设计初衷是包裹文本或行内元素，无法正确承载块级元素（如<div>）的盒模型属性。尽管HTML5规范允许<a>包裹块级元素，但浏览器布局引擎对这种嵌套的解析会出现异常。
2. CSS布局缺失：对比左侧正常显示的蓝色区块，你是将<a>放在<div>内部，并通过.tilelink类设置了display: block; width: 100%; height: 100%;，让链接铺满整个父容器，背景色因此正常显示。而右侧异常区块是<a>包裹<div>，且未给<a>设置块级显示属性，导致<a>的高度仅由内部内容撑开，<div>的margin等属性无法被<a>正确识别，最终背景色只覆盖内容区域，出现截断。
3. 可点击范围的特殊性：虽然背景色截断，但HTML5中<a>包裹块级元素时，链接可点击范围是整个子元素区域，所以鼠标悬停在颜色缺失区域仍能跳转。

推荐两种修复方式，优先选择第一种符合常规布局逻辑的方案：

方案一：调整嵌套结构（推荐） #

保持和左侧正常区块一致的结构，将<a>放在<div>内部，利用已有的.tilelink类让链接铺满整个区块：

<div class="tile1">
  <a href="oferta.html" class="tilelink"><i class="icon-laptop"></i><br />Co oferuję?</a>
</div>

这种方式避免了行内元素包裹块级元素的潜在兼容性问题，同时复用已有CSS样式，代码更简洁。

方案二：修改<a>的显示属性 #

如果必须保留<a>包裹<div>的结构，需要给该<a>设置块级显示，并匹配网格布局的属性：

#square1 a {
  display: block;
  grid-column: span 1;
  grid-row: span 1;
  margin: 10px; /* 将原.tile1的margin转移到<a>上，避免布局偏移 */
}

/* 同时调整.tile1的margin，避免重复 */
#square1 a .tile1 {
  margin: 0;
}

这种方式强制<a>以块级元素渲染，从而正确承载<div>的布局。

修改HTML中对应的区块代码即可，CSS无需额外调整：

<div id="square1">
  <div class="tile1">
    <a href="kimjestem.html" class="tilelink"><i class="icon-user"></i><br />Kim jestem?</a>
  </div>
  <!-- 修复后的嵌套结构 -->
  <div class="tile1">
    <a href="oferta.html" class="tilelink"><i class="icon-laptop"></i><br />Co oferuję?</a>
  </div>
  <div class="tile2">
    <i class="icon-graduation-cap"></i><br />CV
  </div>
  <div class="tile3">
    <i class="icon-mail"></i><br />Kontakt ze mną
  </div>
  <div class="tile4">
    <i>Talk me cheap. Show me the code!</i><br /> - Linus Torvalds, twórca Linuxa
  </div>
</div>

内容的提问来源于stack exchange，提问作者Natalia Kaczyńska