Как уменьшить padding у вкладок?

Здравствуйте. У меня возник такой вопрос: как уменьшить padding у двух больших вкладок ("Tenants" и "Oweners")? Они находятся справа от блока с картинкой, где блок с полями для ввода. Мне нужно, чтобы они не были такими по высоте. Пикселей на 10-15 меньше и будет нормально, но сделать у меня это не получается, много способов перепробовал. Укажите истинный путь) Заранее спасибо)

Код HTML:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>RealSite</title>
			<link rel="stylesheet" href="style.css">
			<link rel="stylesheet" href="fonts.css">
		</head>
		<body>
		
			<header>
				<div class="center-block-main">
					<div class="header-logo">
						<img src="Image/logo.png" alt="">
						<h2>Realestate Company</h2>
						<p>Lorem Ipsum is simply dummy text</p>
					</div>
					<div class="mobile">
						<p>Call us: (214) 227-7669</p>
					</div>
				</div>
				<div class="menu clearfix">
					<div class="menu-content center-block-main">
						<ul class="nav">
							<li><a href="#">Home</a></i>
							<li><a href="#">Our Story</a></i>
							<li><a href="#">Tenant</a></i>
							<li><a href="#">Owner</a></i>
							<li><a href="#">Contact us</a></i>
						</ul>
						<div class="login">
							<p class="text-login"><a class="login-p" href="#">Sign in</a> / <a class="login-p" href="#">Sign up</a></p>
						</div>
					</div>
				</div>
				<div class="header-content center-block-main clearfix">
					<div class="image-block-content">
						<div class="image-border">
							<img src="Image/Layer 40.jpg" alt="">
							<div class="image-text">
								<p class="image-text-spoiler">
								<span class="header-h2">Lorem Ipsum is simply dummy text of </span><br/>
								We work with investors to make managing your investments easy!
								</p>
							</div>
						</div>
					</div>
					<!--<div class="search-block-cetner-main">-->
					<div class="btn-search-block">
						<h2><a href="#">Tenants</a></h2>
					</div>
					<div class="btn-search-block">
							<h2><a href="#">Oweners</a></h2>
					</div>
					<div class="search-block">
						<div class="search-block-content">
							<p class="serch-text">Address, Suburbs, Postcodes, or Regions</p>
							<form name="search" method="post" action="#">
								<input type="text" placeholder="Example: Wichita Falls, Texas 76301">
								<input type="checkbox" name="a" value="Include surrounding suburbs" checked>
								<p>Property Type :</p> <input type="number" placeholder="Select one">
								<p>Bedrooms :</p> <input type="number" placeholder="Select one">
							</form>
							<div class="search-button">
								<h2><a href="#">Search</a></h2>
							</div>
						</div>
					</div>
				</div>
				<!--</div>-->
			</header>
		
		</body>
	</html>


Код CSS:

html,body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.clearfix:after {
    clear: both;
    content: "";
    display: table;
}

/*Шапка сайта*/

header{
	background: linear-gradient(to right, #5f91b0, #4f85a8);
	height: 75%;
	margin-top: -16px;
}

.center-block-main{
	max-width: 1024px;
	margin: 0 auto;
}

.header-logo{
	float: left;
}

.header-logo img{
	margin-top: 15px;
}

.header-logo h2{
	font-family: 'Adobe Fangsong Std';
	color: #fff;
	margin-left: 30px;
	margin-top: -30px;
	font-size: 27px;
}

.header-logo p{
	font-family: 'Microsoft New Tai Lue';
	color: #fff;
	margin-left: 32px;
	font-size: 16px;
	margin-top: -20px;
}

.mobile{
	float: right;
}

.mobile p{
	color: #fff;
	font-family: 'Adobe Caslon Pro';
	font-size: 24px;
	margin-top: 55px;
}
	
/*---Шапка сайта----*/

/*МЕНЮ*/

.menu{
	background: linear-gradient(to right, #d9d9d9, #e2e2e2);
	overflow: hidden;
	clear: both;
    content: "";
    display: table;
	width: 100%;
}

/*.menu > ul{
	display: flex;
	overflow: hidden;
}*/

.nav{
	display: flex;
	float: left;
	list-style: none;
}

.menu a{
	padding-right: 50px;
	text-decoration: none;
	color: #3a5362;
	border: 1px solid transparent;
	padding: 20px;
	font-family: 'MS Sans Serif';
}

.menu a:hover{
	color: #fff;
	background: linear-gradient(to right, #5288a9, #457a9c);
}

.login{
	float: right;
}

.login a{
	padding: 20px 0;
}

.login a:hover{
	color: #9f9999;
	background: none;
	text-decoration: underline;
}

/*-----Меню-----*/

/*HEADER-CONTENT*/

.header-content{
	background: red;
	margin-top: 20px;
	margin-right: 120px;
	padding: 0 5px;
}

.image-border{
	background: #f2e8e8;
	padding: 5px 5px 5px 5px;
}

.image-border img{
	/*padding: 5px 3px 7px 5px;*/
	width: 100%;
}

.image-text{
	background: #1a425a;
	margin-top: -5px;
	padding: 2px;
}

.image-block-content{
	float: left;
	background: #1a425a;
}

.image-block-content p{
	font-family: 'Arial', sans-serif;
	font-size: 14px;
	color: #fff;
	padding-left: 25px;
}

p .header-h2{
	font-family: 'Arial', sans-serif;
	font-size: 20px;
	color: #fff;
	font-weight: 600;
}

.search-block{
	float: right;
	background: green;
	background: linear-gradient(to bottom right, #457fa4, #5899c1);
	padding-left: 200px;
}

.btn-search-block{
	background: #457fa4;
	float: left;
	margin-left: 28px;
	border-radius: 10px 10px 0 0;
}

.btn-search-block a{
	padding: 20px 35px;
	text-decoration: none;
	color: #fff;
	border: 1px solid transparent;
	font-size: 22px;
	font-family: 'Arial', sans-serif;
	border-radius: 10px 10px 0 0;
}

.btn-search-block a:hover{
	background: #c2f2ed;
	color: #548bab;
}

.search-block{
	border-radius: 0 10px 0 0;
	position: relative;
	padding: 0;
	margin: 0;
}

.search-block-content{
	background: green;
	margin: 0;
	padding: 0 0 0 200px;
}

.search-block-content p{
	text-align: center;
	font-size: 16px;
	font-family: 'Arial', sans-serif;
	color: #fff;
}


5a8c40c701f4c027534385.jpeg
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ответы на вопрос 2
@Gortyser
display: none;
Вы запихнули в эти табы элементы h2, у которых по умолчанию есть большой margin.
Можете просто обнулить для них отступы:
.btn-search-block .h2 {
 margin: 0;
}

Но лучше заменить их на что-то другое, заголовки просто так не ставятся.
Ответ написан
@Melagomania
Так у вас же задан падинг для этих элементов, в чем проблема его уменьшить?) Или я неправильно понял вопос?
.btn-search-block a{
  padding: 20px 35px;  //это не тот падинг случайно?
  text-decoration: none;
  color: #fff;
  border: 1px solid transparent;
  font-size: 22px;
  font-family: 'Arial', sans-serif;
  border-radius: 10px 10px 0 0;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
Sveak Барнаул
от 40 000 руб.
21 авг. 2018, в 20:22
530 руб./в час
21 авг. 2018, в 19:08
500 руб./за проект
21 авг. 2018, в 18:45
50000 руб./в месяц