Css 即使定义了高度，删除链接（a href标记）后图像也会变大

我以前有一些图片链接，所有图片都有一个定义的高度。在我删除链接（a href标签）后，图像变得更大

请参见屏幕截图：

我希望它看起来像第一行，它们都是相同的大小（与第二行相比，第二行的圆圈更大，因为我删除了链接），但我不希望圆圈链接到任何东西。我还定义了边距和边框，所以我认为这不是默认的浏览器问题。这可能与我的嵌套div保存图像链接有关，但我不知道是什么原因

非常感谢你能提供的任何帮助

以下是有助于查看来源的网站：

相关CSS：

.text2col{
margin-left:12.5em;
border:0.1em solid black;
background-color:white;
padding:1em;
min-width:46em;
overflow:auto;
text-align:left;
max-height:31em;

}

.text2colin{
overflow:auto;
}

.teaminfo{
margin-left:5em;
margin-top:-0.25em;
}

#img{
text-align:center;
}

.imgteam{
margin:1em;
height:auto;
width:auto;
float:left;
text-align:center;
}

.imgteam a:hover img{
border:0.2em solid #cd05ff;
}

.imgteam img{
display:inline;
margin:0;
border:0.2em solid black;
width:9.5em;
height:9.5em;
-moz-border-radius:4.75em;
-webkit-border-radius:4.75em;
border-radius:4.75em;
}

.imgschool{
margin:1em;
height:auto;
width:auto;
float:left;
text-align:center;
}

.imgschool a:hover img{
border:0.2em solid #cd05ff;
}

.imgschool img{
display:inline;
margin:0;
border:0.2em solid black;
width:19em;
height:9.5em;
-moz-border-radius:2em;
-webkit-border-radius:2em;
border-radius:2em;
}

.teamcaption{
text-align:center;
font-weight:normal;
width:auto;
margin:0.2em;
}

.imgteamsmall img{
width:4em;
height:4em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
border-radius:1em;
border:0.2em solid black;
float:left;
}

相关html：

<div class="text2colin">

<div class="imgschool"><a target="blank" href="http://terc.edu"><img src="img/school.png" alt="picture of school"></a>
<div class="teamcaption"><p class="img"><strong>Name of school</strong><br />School system</p>
    </div>
</div>              

<div class="imgteam"><a href="#teacherinfo"><img src="img/school.png" alt="picture of teacher"></a>
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>

<div class="imgteam"><a href="teacherinfo"><img src="img/school.png" alt="picture of teacher"></a>
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>                

</div><!--end div class=text2colin-->

<div class="text2colin">

<h4>Section Header Two</h4>

</div><!--end div class=text2colin-->

<div class="text2colin">

<div class="imgschool"><a target="blank" href="http://terc.edu"><img src="img/school.png" alt="picture of school"></a>
<div class="teamcaption"><p class="img"><strong>Name of school</strong><br />School system</p>
    </div>
</div>

<div class="imgteam"><img src="img/school.png" alt="picture of teacher">
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>

<div class="imgteam"><img src="img/school.png" alt="picture of teacher">
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>   

学校名称

教师姓名
年级#教师
教师姓名
年级#教师
第二节标题
学校名称

教师姓名
年级#教师
教师姓名
年级#教师

尝试使用px而不是em。例如：

高度：100px

问题不在于您在此处发布的CSS片段，而在于您的

字体.CSS

样式表

a:link {text-decoration:none; color:blue; font-size:0.9em}

---

由于字体大小是继承的，

a

中的所有内容都将具有此字体大小，

a

中的

9.5em

将与其外部的

9.5em

不同

无论如何，当我在这里尝试时，它不会发生，所以你有更多的样式，可以改变

a

元素的字体大小吗？@MrLister，谢谢你的关注。我忘了搭建试验场地；我现在已经编辑了URL。不，我没有在其他地方定义a元素——事实上，我不知道我可以，这就是我为img定义样式的原因。谢谢，但这并不能解决问题。