[我想提升所有:电话图标+数字块,社交媒体图标块和回调块到"特斯拉标志"水平。我尝试了填充和边距,但它没有工作1
答案 0 :(得分:0)
我认为这会对你有所帮助
a {
text-decoration: none;
color: #333;
}
.top-header > div {
float: left;
padding: 0 15px;
}
.callback a {
background: lightblue;
border: 2px solid #333;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
margin-top: 20px;
}
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="section">
<div class="top-header">
<div class="logo-block">
<img src="https://lorempixel.com/100/100/" />
</div>
<div class="phone-icon">
<p>
<i class="fa fa-phone-square" aria-hidden="true"></i> +1(55) 345 67 74
</p>
<p>
<i class="fa fa-phone-square" aria-hidden="true"></i> +1(44) 231 24 12
</p>
</div>
<div class="social-icon">
<p>
<i class="fa fa-envelope" aria-hidden="true"></i> hr@gmail.com
</p>
<a href="">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</a>
<a href="">
<i class="fa fa-vk" aria-hidden="true"></i>
</a>
<a href="">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</a>
</div>
<div class="callback">
<a href="">callback</a>
</div>
</div>
</div>
</body>