html - 图像和文本之间的空白即使 0 填充也不起作用
问题描述
我希望文本在没有空格的图像下方.. 我也尝试了 0 边距和 0 填充但没有用.. 我应该为跨度创建另一个 div 吗?我也尝试了溢出隐藏:(
body 标签中也没有填充, (*) 我想知道它是否由 display:block 或 display flex 引起。
* {
outline: 0px;
box-sizing: border-box;
position: relative;
padding: 0;
margin: 0;
}
body {
background-color: #1b191b;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #232223;
width: 100%;
height: 65px;
z-index: 9999;
box-shadow: 0 0 20px #00000094;
}
.header-links ul li a {
text-decoration: none;
}
.header-links ul li {
display: inline;
margin-right: 50px;
}
.header-logo {
padding: 20px;
margin-left: 50px;
}
.search-bar {
padding: 20px;
margin-right: 50px;
}
.container {
width: 93%;
max-width: 1600px;
margin: 0 auto;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 270px;
margin: 0 12px 30px;
}
img {
padding: 0;
width: 100%;
height: 100%;
border-top-left-radius: 3%;
border-top-right-radius: 3%;
}
.caption {
padding: 0;
display: block;
background-color: #232223;
border-bottom-left-radius: 10%;
border-bottom-right-radius: 10%;
}
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Header</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-logo">ON ANIME</div>
<div class="header-links">
<ul>
<li><a href="#">url</a></li>
<li><a href="#">url</a></li>
<li><a href="#">url</a></li>
</ul>
</div>
<div class="search-bar"><button>Buy now</button></div>
</header>
<div class="container">
<div class="item">
<img src="https://fr.techtribune.net/wp-content/uploads/2021/01/boruto-chapter-55.jpg"/>
<span class="caption">Text below the image</span>
</div>
</div>
<script src="" async defer></script>
</body>
</html>
解决方案
默认情况下,图像是内联元素。因此,它们遵循内联baseline
规则,并且还有一个decender
(g、j、y、p 等字母的空格)。要删除 ,inline decender space
您必须将其设置为块级元素:
img { display: block; }
:
这将删除inline decender space
并且因此 enxt 元素将附加到它的正下方。
* {
outline: 0px;
box-sizing: border-box;
position: relative;
padding: 0;
margin: 0;
}
body {
background-color: #1b191b;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #232223;
width: 100%;
height: 65px;
z-index: 9999;
box-shadow: 0 0 20px #00000094;
}
.header-links ul li a {
text-decoration: none;
}
.header-links ul li {
display: inline;
margin-right: 50px;
}
.header-logo {
padding: 20px;
margin-left: 50px;
}
.search-bar {
padding: 20px;
margin-right: 50px;
}
.container {
width: 93%;
max-width: 1600px;
margin: 0 auto;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 270px;
margin: 0 12px 30px;
}
img {
display: block;
width: 100%;
height: 100%;
border-top-left-radius: 3%;
border-top-right-radius: 3%;
}
.caption {
padding: 0;
display: block;
background-color: #232223;
border-bottom-left-radius: 10%;
border-bottom-right-radius: 10%;
}
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Header</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-logo">ON ANIME</div>
<div class="header-links">
<ul>
<li><a href="#">url</a></li>
<li><a href="#">url</a></li>
<li><a href="#">url</a></li>
</ul>
</div>
<div class="search-bar"><button>Buy now</button></div>
</header>
<div class="container">
<div class="item">
<img src="https://fr.techtribune.net/wp-content/uploads/2021/01/boruto-chapter-55.jpg" />
<span class="caption">Text below the image</span>
</div>
</div>
<script src="" async defer></script>
</body>
</html>
推荐阅读
- php - 在 jquery 中发布数据时如何使用 jquery UI 使 post.php 弹出消息
- r - 在 R 中,“整数”类型是否继承自“数字”类型?
- python - 安装 IPython 内核后,如何在 Jupyter Notebook 上运行 conda 环境的 shell 命令?
- android - 进度条内的Android textview
- python - 为什么即使显式检查是否为 None,在 python 中也会出现 NoneType 错误?
- mysql - 管理员表和用户表之间应该是什么关系
- angular - Angular 不路由到嵌套的路由器插座
- javascript - 如何处理返回包含基本内容的 Html 的 Ajax