Question

我在编码方面相当新，需要一些帮助。目前我正试图在我的文字和照片周围形成边框。但不知怎的，我不能这样做。它应该大致如下http://imgur.com/a/fkUba。在顶部的照片和底部的文字。

我的代码看起来像这样

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
<style>
img {
    border: 5px solid black;
}   
</style>
  </head>
  <body>
<img src="https://pbs.twimg.com/profile_images/770467680012890112/kSz1jtnn.jpg" alt="Coca Cola"
<a href="coca-cola.com">Coca Cola</a>
  </body>
</html>

像这样，我只能在徽标周围放一个边框。

我知道如何发短信，链接（<p> <a href>），但我不知道如何围绕这些进行正确的边框。这就像'这是我的功课'，但我真的需要帮助！

Answer 1

我建议创建一个类来存储边框以减少代码。

.borders {
   border: 1px solid black;
}

然后将该类分配给您想拥有边框的所有内容：

<img class="borders" src="https://pbs.twimg.com/profile_images/7704676800128901/kSz1jtnn.jpg"

对于文本，您可以在顶部和底部添加一些填充以增加空白区域：

h2 {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

Answer 2

我认为您需要为此徽标设置边框：

在css中输入这样的代码。

img{
    border: 1px solid black;
   }

祝你好运

Answer 3

就像使用这种风格的图像边框一样：

img {
    border: 5px solid black;
}

你可以在几乎任何类似样式的元素周围设置边框，例如：

p {
    border: 5px solid black;
}  

a {
    border: 5px solid black;
}

如何围绕链接和文本形成边框？

3 个答案: