Twitter引导程序：在表单字段之间添加边距，位置图片和空格

Question

直截了当地说，我是CSS的初学者。我发现Twitter引导程序看起来非常容易使用......好吧，不是这样。

请查看this。

我需要：

1）将徽标（带有X）放在它下方的正方形内

2）从顶部添加一些余量。目前，浏览器网址栏和徽标/字段

之间几乎没有空格

3）当输入字段为水平时，在输入字段之间添加一些空格，例如。领域：“SeuNúmerodeCelular：”，“Boleto Bancario”和“Conta de Consumo”。现在，他们几乎被粘在一起了。

我也很感激有关CSS教程的任何好建议。如果这很重要，我正在使用django。

感谢您的帮助

Answer 1

W3C Schools是从CSS开始的好点。

1）了解position:relative或使用background并将框置于background-url

.your-square-image /*You will need to put class="your-square-image" to the squarebox*/
{
position: relative;
top: -120px;
z-index: -1;
}

2）只需使用margin-top调整顶部的边距

.logo {
margin-top: 50px;
}

3）对所有输入使用margin-right（或将其放入正确的class）

input 
{
margin-right: 15px;
}

上面的所有CSS都可以放在你的html页面的顶部，或者放在单独的css文件中，然后从你的页面链接它（推荐）。