标签: spacing
chrome 中元素和边框之间的奇怪间距
我将几个 div 包裹在 div 容器内，我可以看到边框和元素之间有一些奇怪的空间。问题发生在chrome 和 edge上。我尝试了Mozilla，效果很好。
我正在使用 bootstrap 和一些自定义 CSS。
我也分享相关代码：
.fullScreen {
height: 100vh;
width: 100vw;
}
.mainContainer {
align-items: center;
justify-content: flex-start;
}
.row {
margin: 0!important;
}
#box {
margin: 0 0 0 5vh;
height: 90vh;
width: 90vh;
}
.rowEndings {
height: 36vh;
}
.rowMid {
height: 18vh;
}
@media (orientation: portrait) {
.mainContainer {
align-items: flex-start;
justify-content: center;
}
}<!-- adding bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" …推荐指数
解决办法
查看次数
用于将文本创建为位图的工具（抗锯齿文本、自定义间距、透明背景）
我需要批量创建带有文本的图像。要求：
- 任意大小的位图
- PNG格式
- 透明背景
- 黑色文本抗锯齿透明度
- 字符间距可调
- 可调整的文本位置（文本开始处的 x 和 y 坐标）
- TrueType 和/或 Type1 支持
- Unix 命令行工具或 Python 库
到目前为止，我已经评估了以下内容：
- Python 成像库：失败 5。
- ImageMagick（“标题”选项）：很难弄清楚 6.
- PyCairo：失败 5。
- SVG + ImageMagick 转换：最有前途的，虽然需要多种工具
PIL 的问题在于，例如 Verdana 的默认间距太稀疏了。我需要文本更紧凑一些，但无法在 PIL 中对其进行调整。
在 ImageMagick 中，我还没有找到一种简单的方法来指定文本在图像中的开始位置（我使用的是 -size WIDTHxHEIGHT 和标题：'TEXT'）。添加透明边框会将文本从其锚定的角落移开，但是
- 由于边框增加了范围，因此需要相应地调整图像大小
- 无法独立调整水平和垂直偏移
我是否错过了一些明显的替代方案或未能从上述提到的功能中找到必要的功能？
推荐指数
解决办法
查看次数
不明原因的额外空间,可能填充在表内的表
这是我正在进行布局的实验.我有很多问题来定位div来实现这个效果,所以我转向旧的待机,表级联.我的问题是,最后一个上方框在所有3个浏览器中都有额外的填充,无论我尝试什么,我似乎无法使用CSS或HTML.红色框应该在你看到的绿色位上齐平,红色框之间蓝色行的右边不应有1px可见的绿线.任何见解都将非常感激.
<!doctype html>
<html>
<head>
<style>
table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}
td table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}
img { display: block; }
</style>
</head>
<body style="background-color: black;">
<table style="background-color: white; height: 525px; width: 3200; padding-top: 25px; padding-bottom: 25px;">
<tr>
<td colspan="1" style="width: 350px;">
<table class="container" style="height: 475px; width: 350px; margin-left: 25px; margin-right: 25px;">
<tr>
<td style="background-color: green; height: 225px; width: 350px;" colspan="3">
</td>
</tr>
<tr>
<td style="background-color: blue; height: 25px; …推荐指数
解决办法
查看次数
QT：删除QGridLayout中QLabel之间的空格
我将一些具有不同颜色的 QLabels 添加到 QGridLayout 作为 QWidget 的布局，现在我在每个 Qlabel 与下一个 Qlabel 之间有一个间距，我想将其删除。我尝试将标签的边距设置为“0”，将 GridLayout 的对齐方式设置为“0”，但效果不佳。我认为该空间可能是标签的边框，但我检查了。你有什么主意吗？
推荐指数
解决办法
查看次数
网格系统和内联块间距
我刚看到http://csswizardry.com/2013/02/introducing-csswizardry-grids/和它的演示(http://csswizardry.com/csswizardry-grids/).我认为这是解决CSS中网格的一种非常好的方法.所以我检查了源代码,看看它是如何完成的,我看到了一个小东西,我无法弄清楚它是如何完成的.
这个网格系统不是使用浮点数而是使用内联块元素,这是一件好事.但每次我使用内联块的百分比宽度列/网格等我有这个内联块间距.我知道有几种方法(主要是HTML中的更改)来摆脱这种间距:http://css-tricks.com/fighting-the-space-between-inline-block-elements/
但是在网格系统中我向你展示了没有那些修复(据我所见),如果检查源代码,仍然没有内联块间距.只是为了向您展示我在这里主要有的问题是一个快速的小提琴:http://jsfiddle.net/nN8mV/
HTML
<p>Floating columns (width 33.3%)</p>
<div class="grid cf">
<div class="grid__item">Test</div>
<div class="grid__item">Test</div>
<div class="grid__item">Test</div>
</div>
<p>Inline Block columns (width 33.3%)</p>
<div class="grid grid--inlineblock">
<div class="grid__item">Test</div>
<div class="grid__item">Test</div>
<div class="grid__item">Test</div>
</div>
CSS
.grid {
margin-bottom: 20px;
}
.grid__item {
float: left;
width: 33.3%;
background: red;
}
.grid--inlineblock .grid__item {
float: none;
display: inline-block;
}
您可能知道,但由于这种间距,33.3%的宽度不起作用.网格系统似乎没有这个问题,尽管它也使用"display:inline-block".所以我的问题:CSS Wizardy如何解决这个问题？我无法理解并且改变HTML(参见上面的CSS Tricks链接)并不经常工作,因为CMS生成的内容或其他东西,你无法适应你的HTML.
在此先感谢您的帮助.
推荐指数
解决办法
查看次数
glyphicon和文本之间的间距？
我正在尝试添加字形图标作为电子邮件地址链接的一部分.图标显示但图标和电子邮件地址文本之间没有间距(我希望超链接包括图标和文本......包括空格).实现这一目标的最佳方法是什么？
<a href="mailto:someone@somewheredotcom" title="Some Email">
<span class="glyphicon glyphicon-envelope">someone@somewheredotcom</span>
</a>
推荐指数
解决办法
查看次数
如何在表的某些列之间添加间距？
我想做一个这样的表:
C和D,D和E以及F和G之间应该有间距.但是任何其他列之间不应该有任何空格,例如A和B.
这就是我目前拥有的:
JSFiddle:https://jsfiddle.net/e33cbkh3/1/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
thead {
background: orange;
}
th, td {
text-align: center;
border: none !important;
}<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th colspan="3"></th>
<th></th>
<th colspan="2"> XYZ </th>
<th></th>
</tr>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>推荐指数
解决办法
查看次数
在Lilypond分数的第一页上安装更多系统
我的工作加以改进极好的片,我发现的德彪西的Deuxième Arabesque上免费提供的Mutopia项目.
特别是,我有兴趣在较少的页面上安装音乐,但我很难让第一页显示五个系统而不是四个与我到达的版本.
从上面的再现,我希望fith系统(从第13栏开始)位于第一页的底部.看起来第一页上有很多浪费的空间,我相信它会完美契合.
我很难搞清楚如何实现这一目标.我已经按照文档的建议显示了间距注释,但我似乎无法理解它.
推荐指数
解决办法
查看次数
Outlook 2016 在表格行之间添加了空间。HTML 电子邮件开发人员，找不到有效的修复程序
Outlook 2016 正在 HTML 电子邮件中的表格行之间添加空格。我找不到有效的修复程序。顶部的蓝色部分应该是一个条形，没有白色间隙。底部的灰色部分也应该是一个页脚部分，其中没有两个白色间隙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title>Learn how to improve employee retention by over 40%!</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / …推荐指数
解决办法
查看次数
增加 Compose 中 AlertDialog 的标题和文本之间的间距
AlertDialog像下面这样简单
AlertDialog(
modifier = Modifier,
title = {
Text(text = "Title")
},
text = {
Column(
modifier = Modifier.fillMaxWidth()
) {
TextButton() {
Text("Text 1")
}
TextButton() {
Text("Text 2")
}
}
},
confirmButton = {},
dismissButton = {}
)
如何设置标题和第一个之间的间距TextButton？
我尝试将 a 设置.padding(top = X.dp)为“列”或第一个文本按钮，但这似乎只在 .txt 文件的底部创建一个空间AlertDialog。
设置自定义也.height(X.dp)不起作用。
我正在使用撰写1.0.3
android spacing android-layout android-dialog android-jetpack-compose
推荐指数
解决办法
查看次数