Question

我正在开发一个基于HTML的ui，因为我是css的新手，所以请建议我想格式化我的UI，以便顶部和顶部之间的间距。底线＆amp;按钮减少。
此外，要移动的文本很少，以便它在按钮的中心位置。

请参阅附图，我已编辑并添加了箭头。

是否可以用一些单个TAB 替换多个 ？

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#292B3B;
}
h1 {color:white;}
p  {color:#DDDFED; font-size:150%; text-indent:5px; align="middle"}

</style>
</head>

<body>

<h1>My CSS web page!</h1>
<hr>

<p> 
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" value="Submit" alt="Bulb pop up" width="48" height="48" /> 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
Button One

</p>

<hr>


<p> 
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" value="Submit" alt="Bulb pop up" width="48" height="48" /> 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
Button Two

</p>

<hr>


</body>
</html>

enter image description here

Answer 1

问题是您没有重置浏览器应用的默认margin和padding，因此请使用下面的代码段。

* {
    margin: 0;
    padding: 0;
}

Demo

要获得最一致的跨浏览器体验，您可以使用CSS Reset Stylesheet。

您需要使用下面的代码段来垂直居中对齐您的图片。

input[type=image] {
    vertical-align: middle;
}

此外， ~~align="middle"~~ 不正确，您应该使用text-align: center;。

整理整个事情......

Final Demo

* {
    margin: 0;
    padding: 0;
}

body {
    background-color:#292B3B;
}

h1 {
    color:white;
    padding: 10px;
}

p {
    color:#DDDFED;
    font-size:150%;
    text-indent:5px;
    padding: 10px;
}

input[type=image] {
    vertical-align: middle;
}

Answer 2

更新了你的CSS。 Working Fiddle

input[type=image]{
display:inline-block;
vertical-align:middle;
}

Html - 减少水平线和水平线之间的间距。图片

2 个答案: