Question

我有2个页面块，每个块由3个跨度组成。一个跨度包含2个其他跨度。我想要实现的是摆脱这两个块之间的差距。看看这个例子。边距和填充设置为零。

＆＃13;

.wrapper {
    display: inline-block;
	background-color: grey;
	padding: 25px;
	width: 50%;
}

.olive {
	display: block;
	height:50px;
	line-height: 50px;
	padding: 0px;
	margin: 0px;
	float: left;
	background-color: olive;
    
}

.blue {
	display: block;
	height:50px;
	line-height: 50px;
	width: 50px;
	padding: 0px;
	margin: 0px;
	float: right;
	background-color: #BCDBEA;
	text-align: center;
	border-radius: 50%;
    cursor: default;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
</body>
</html>

＆＃13;

Answer 1

这是“线下降空间”，p，g或j的下部。跨越“内联”元素，因此它被放置在“行中”，就像它们在字母中一样。内联块也是“内联”，只需更改它放在行上的“位置”：垂直对齐是内联元素的默认“基线”，请尝试vertical-align:bottom

你也可以处理行高：0（所以没有下行空间）或显示：block和“float”

.wrapper {
    display: inline-block;
	background-color: grey;
	padding: 25px;
	width: 50%;
  vertical-align:bottom;
}

.olive {
	display: block;
	height:50px;
	line-height: 50px;
	padding: 0px;
	margin: 0px;
	float: left;
	background-color: olive;
    
}

.blue {
	display: block;
	height:50px;
	line-height: 50px;
	width: 50px;
	padding: 0px;
	margin: 0px;
	float: right;
	background-color: #BCDBEA;
	text-align: center;
	border-radius: 50%;
    cursor: default;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
</body>
</html>

Answer 2

您正在使用display：inline-block，它会保留块之间的空格/下行。添加一个外部包装器并将font-size设置为0，这会取消空白区域（然后必须重置包装器上的字体大小），例如。

＆＃13;

.wrapper {
    display: inline-block;
	background-color: grey;
	padding: 25px;
	width: 50%;
  font-size: 1rem;
}

.olive {
	display: block;
	height:50px;
	line-height: 50px;
	padding: 0px;
	margin: 0px;
	float: left;
	background-color: olive;
    
}

.blue {
	display: block;
	height:50px;
	line-height: 50px;
	width: 50px;
	padding: 0px;
	margin: 0px;
	float: right;
	background-color: #BCDBEA;
	text-align: center;
	border-radius: 50%;
    cursor: default;
}

.outer-wrapper {
font-size: 0;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="outer-wrapper">
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
<span class="wrapper">
    <span class="olive">The box with some text</span>
    <span class="blue">?</span>
</span>
</div>
</body>
</html>

＆＃13;

两个街区之间的差距

2 个答案: