Как сделать так, чтобы теги p и h3 начинались на одной высоте? - PullRequest
Новая
       1

Как сделать так, чтобы теги p и h3 начинались на одной высоте?

0 голосов
/ 13 января 2019

Когда я использую теги h3 и p в одной строке, тег p начинается с верхней высоты: 

body {
  font-size: 4.5vh;
  height: 100%;
  width: 90%;
  position: relative;
  left: 5%;
  right: 5%;
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header {
  position: relative;
}

#banner {
  float: left;
  color: #C93756;
}

#account {
  float: left;
}
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="styles/index.css">
</head>

<body>
  <header>
    <h3 id="banner">samplewebsite.com</h3>
    <p id="account">Sign In</p>
  </header>
</body>

</html>

Почему это происходит и как сделать так, чтобы два тега отображались на одном уровне?

Ответы [ 2 ]

0 голосов
/ 13 января 2019

Это происходит потому, что <h3> получает font-size: 1.17em от стилей браузера по умолчанию, а <p> получает font-size: 4.5vh от ваших стилей.

Если вы хотите, чтобы ваш <h3> вместо этого наследовал font-size от тела, вы должны указать это с помощью #banner {font-size: inherit;}. 

body {
  font-size: 4.5vh;
  height: 100%;
  width: 90%;
  position: relative;
  left: 5%;
  right: 5%;
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header {
  position: relative;
}

#banner {
  float: left;
  color: #C93756;
  font-size: inherit;
}

#account {
  float: left;
}
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="styles/index.css">
</head>

<body>
  <header>
    <h3 id="banner">samplewebsite.com</h3>
    <p id="account">Sign In</p>
  </header>
</body>

</html>
0 голосов
/ 13 января 2019

Значение h3 обычно выше, чем у элемента p из-за размера шрифта и соответствующих настроек высоты строки и полей. Плавающие элементы выровнены по верху, что из-за различной общей высоты элементов приводит к тому, что вы видите в своем примере.

Используйте display: inline-block; вместо float - это выравнивает их по базовой линии по умолчанию. 

body{
	font-size:4.5vh;
    height:100%;
    width:90%;
    position: relative;
    left: 5%;
    right: 5%;
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
header {
    position: relative;
}

#banner {
    display: inline-block;
    color: #C93756;
}

#account {
    display: inline-block;
}
<html>
	<head>
		<title></title>
		<link rel="stylesheet" href="styles/index.css">
	</head>
	<body>
		<header>
			<h3 id="banner">samplewebsite.com</h3>
			<p id="account">Sign In</p>
		</header>
	</body>

</html>

Альтернативное решение после дополнительного вопроса в комментарии:

Вы можете использовать display: flex на родительском элементе, используя следующие настройки, чтобы выровнять оба элемента вдоль их базовой линии по левому и правому краю родительского элемента.

justify-content: space-between; выполняет распределение влево / вправо (для двух элементов, как в данном случае), а align-items: baseline; выполняет выравнивание по вертикали. В этом случае вам не нужны никакие специальные настройки для дочерних элементов. 

body{
	font-size:4.5vh;
    height:100%;
    width:90%;
    position: relative;
    left: 5%;
    right: 5%;
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

#banner {
    color: #C93756;
}
<html>
	<head>
		<title></title>
		<link rel="stylesheet" href="styles/index.css">
	</head>
	<body>
		<header>
			<h3 id="banner">samplewebsite.com</h3>
			<p id="account">Sign In</p>
		</header>
	</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...