gpt4 book ai didi

HTML 为什么我的边框中的 span 和 div 有区别?

转载 作者:太空宇宙 更新时间:2023-11-03 20:27:26 29 4
gpt4 key购买 nike

我目前正在学习 CSS 并进行试验,我偶然发现了输出中的这种差异。所以这是代码:

        <html>
<body>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, monospace;
}

p {
font-size: 16px;
font-family: monospace;
}

.smaller-image {
width: 100px;
}

.thick-green-border {
border-width: 10px;
border-color: green;
border-style: solid;

}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.
</p>

<a href="#"><div class="thick-green-border"><img class="smaller-image"
src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on
its back."></div></a>
</main>
</body>
</html>

这是输出: enter image description here

但是如果我改变这一行:

 <a href="#"><div class="thick-green-border"><img class="smaller-image" 
src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on
its back."></div></a>

为此(只需用 span 替换 div):

 <a href="#"><span class="thick-green-border"><img class="smaller-image" 
src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on
its back."></span></a>

我得到完全不同的输出: enter image description here

那么有人可以向我解释一下代码中发生了什么吗?

最佳答案

<div> tag 是 block 级元素,因此它占用整个 block 。但是<span>标签是内联元素。

<div>0000000<div>111111</div>222222</div>

<span>0000000<span>111111</span>222222</span>

查看此示例以进行说明。

如果我添加display:block跨越它的行为就像一个 block 。所以它需要全宽

span{display:block;border:1px solid green}
<span>0000000<span>111111</span>222222</span>

关于HTML 为什么我的边框中的 span 和 div 有区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51019265/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com