边框底部不显示在图像下方，但显示在同一 div 中的文本下方答案

【问题标题】：Border bottom doesn't show below an image but shows up below text in the same div边框底部不显示在图像下方，但显示在同一 div 中的文本下方
【发布时间】：2021-10-17 02:22:59
【问题描述】：

我有一个 div 元素，旁边有一个图像和一个文本。我需要图像和文本都有一个底部边框。但是，边框仅出现在文本下方而不是图像下方。下面是我的模板和 CSS。我错过了什么，您能指出任何解决方案吗？

<div class="header">
   <img class="local-image" src="assets/icons/local-icon.svg">
   <div class="pt-4 text-sm">
      <h4>Image Label</h4>
      <p>{{ imageDetails.name }} </p>
   </div> 
</div>


.header {
        @apply relative mx-9 border-b border-solid border-nobel;
}

.local-image {
         @apply absolute top-4 -left-11;      
  }

【问题讨论】：

会不会是图片覆盖了边框？您可以尝试添加一些额外的填充。
您能否展示正在添加到 .header 和子项的任何其他样式？
图像没有覆盖边框，即使我将图像移到顶部，底部仍然没有边框@OctavianMărculescu
@DanielGuzman 没有更多样式，只有我针对问题编辑的图像样式。
@ShrawaniSilwal 如果您学会使用浏览器检查器，您将能够解决此类问题 =)

标签： html css angular tailwind-css

【解决方案1】：

我看到您正在应用 -left-11 类，因为图像与文本重叠，但是您正在做的是 将图像从容器 (.header) 中拉出。如果你检查盒子，你会注意到它。

对于您当前的代码，最快的解决方案是不将图像移出其容器，而是将其移至左边框，并为容器添加一些左侧填充。

.header {
    @apply relative mx-9 border-b border-solid border-nobel pl-11;
}

.local-image {
    @apply absolute top-4 left-0;      
}

注意.header 上的pl-11 和.local-image 上的left-0。只是没有将图像移出容器的左侧，而是将其粘贴到左边框，而是解决重叠问题，应用 11 (tailwind... "points" 或somethign) 作为容器的左边距。

【讨论】：

这很好，图像确实被从容器中拉出。谢谢。