如何在不超过边框高度的情况下将 <img> 放在 <p> 中？ [关闭]答案

【问题标题】：How to put a <img> inside a <p> without transpassing border height? [closed]如何在不超过边框高度的情况下将 <img> 放在 <p> 中？ [关闭]
【发布时间】：2016-02-29 18:27:13
【问题描述】：

我是Html/CSS 的新手，现在我正在尝试为朋友创建一个网站（仅使用 html 和 css）。在页脚中，我想在此 photo 中添加 img：How I want

但是，到目前为止，我所能做的就是：

What I could do until now

我可以按照我想要的方式放置文本并制作边框，我可以在鼠标悬停时放置一种蓝色并且可以在所有边框空间中单击。 但是，我无法将这个图标图像放在里面。你能帮帮我吗？

非常感谢！

    #footer {
    	height: 500px;
    	width: 100%;
    	bottom: 0;
    	background: #b6b6b6;
    	display: table;
    	color: white;
    	text-align: center;
    	background-repeat: no-repeat;
    	background-size: 100%;
    }

    #atua {
    	width: 30%;
    	display: inline-block;
    	text-align: initial;
    }

    .job {
    	border: 2px solid #ffffff;
    	width: 75%;
    	height: 35px;
    	margin: 0;
    	margin-bottom: 5px;
    	padding-top: 8px;
    	padding-left: 50px;
    }

    div #atua a {
    	text-decoration: none;
    	color: #ffffff;
    }

    div .job:hover {
    	background-color: #14aca9;

    <div id="footer">
      <div id="atua">
        <h3>&Aacute;rea de Atua&ccedil;&atilde;o</h3>
        <a href="#"><p class="job">Trabalhista</p></a>
        <a href="#"><p class="job">Empresarial</p></a>
        <a href="#"><p class="job">Previdenci&aacute;rio</p></a>
        <a href="#"><p class="job">C&iacute;vil</p></a>
      </div>
    </div>

【问题讨论】：

请在此处提供您的代码
您好，我编辑了帖子以提供代码 =) 抱歉。

标签： html css image icons

【解决方案1】：

这是您想要的 HTML/CSS 版本。

a {
  display: inline-block;
  background-image: url('http://static1.squarespace.com/static/51885970e4b0d20f07f4329d/t/519d043ae4b0f5d1146aa6ca/1369244735750/HD+TEXTURE+1.jpg');
  background-size: cover;
  padding: 3px;}
a span {
  display: inline-block;
  width: 200px;
  padding: 10px 0 10px 50px;
  border: 1px solid white;
  color: white;
  background-image: url('http://www.iconsdb.com/icons/preview/tropical-blue/square-xxl.png');
  background-size: 39px 39px;
  background-repeat: no-repeat;
}
a:hover span {
  background-color: #14aca9;
}

&lt;a href="#"&gt;&lt;span&gt;Trabalhista&lt;/span&gt;&lt;/a&gt;

【讨论】：

感谢您的回答。我想要做的是将图像放在左侧，如下所示：i.stack.imgur.com/alsHL.png =/
对不起，我误解了你想要的。我以为您正在寻找黑色背景图像超出白色边框。我更新了我的答案。
smdsgn，您的代码按我想要的方式运行 =D 感谢您的帮助！
不客气@ThassioPaganucciXavier。

【解决方案2】：

我们需要查看您的代码，但如果您想要一个简单的答案，这可能会有所帮助。

<footer style="height:100px;text-align:center;">
    <a href="index.html"> <img src="click.jpg" height="100"/><a>
</footer>

【讨论】：