Doy un poco de contexto:
Tengo una página html (no responsive, pero no nos centremos en eso) que pertenece a un curso que hice el año pasado. En ella, un elemento cuyo tamaño es FIJO (width:940px; height:70px;). Dentro de él, sus elementos
@charset "utf-8";
/*Google Font: font-family: 'PT Sans', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
/* CSS Document */
body {
font-family:'PT Sans', sans-serif;
background-image:linear-gradient( #ffcfa2fb,#4c3d2efb);
margin: 0px;
background-attachment: fixed;
}
#contenedor {
width:960px;
height:auto;
margin-left:auto;
margin-right:auto;
}
header {
height:290px;
}
h1 {
margin:0 0 0 40px;
color:#020103;
font-family: 'PT Sans', sans-serif;
font-weight: 700;
font-size:3rem;
text-shadow: 3px 3px 8px #e66e0b8d;
}
a {
color:#4b9be1;
text-decoration:none;
}
#botonera_principal {
width:940px;
height:70px;
border-left: 20px solid black;
background-color:#050505;
}
#botonera_principal:hover{
border-left: 20px solid #fe8d0c;
}
#botonera_principal ul {
width:940px;
height:70px;
margin:0;
padding:0;
list-style-type:none;}
#botonera_principal ul li {
display: inline;
width: 187px;
height: 70px;
}
#botonera_principal ul li a {
display: inline-block;
color:#f8f8f8;
text-decoration:none;
text-align: center;
border-right:1px dotted #ffffff;
width: 187px;
height: 70px;
line-height: 70px;
}
#botonera_principal ul li a:hover {
background-color:#e8be64;
}
#marca {
background-image:url(imagenes/fondo_marca.jpg);
height:200px;
padding-top:27px;
border-left:solid 20px black;
}
#marca:hover{
border-left:solid 20px #d23e0d;
}
#contenido {
padding:20px;
background-color:#ffffff70;
border-left: 20px solid black;
}
#contenido:hover{
border-left: 20px solid #b5fcfb;
}
#ejer_1, #ejer_2, #ejer_3, #ejer_4 {
margin: 10px;
padding: 2%;
}
#ejer_1 {
background-color: #ffffcc;
}
#ejer_2 {
background-color: #e6ffcc;
}
#ejer_3 {
background-color: #ccf2ff;
}
#ejer_4 {
background-color: #ffccff;
}
.ajustar {
width: 100%;
}
h2 {
color:#0a0707;}
footer {
background-color:#ffffff;
padding:20px;
border-left: 20px solid black;
}
footer:hover{
border-left: 20px solid #fcf94bfb;
}
footer a {
color:#FFF;
font-weight:bold;}
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>Diseño y Programación WEB</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<section id="contenedor">
<header>
<nav id="botonera_principal">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="catalogo.php">Catálogo</a></li>
<li><a href="noticias.php">Noticias</a></li>
<li><a href="clientes.php">Clientes</a></li>
<li><a href="contacto.php">Contáctenos</a></li>
</ul>
</nav>
<div id="marca">
<h1>Diseño y Programación WEB II<br/>IFEE</h1>
</div>
</header>
<section id="contenido">
<h2>Introducción a PHP</h2>
<div id="ejer_1">
<h4>
<?php
echo "Qué es y para qué sirve PHP?"."<br/>";
?>
</h4>
<p>
<?php
echo "PHP es un lenguaje de programación de código abierto del lado del servidor que se utiliza principalmente para crear páginas web dinámicas."."<br/>";
?>
</p>
<p>
<?php
echo "La abreviatura nació originariamente de “Personal Home Page Tools”, aunque hoy en día se ha convertido en el acrónimo recursivo para “PHP: Hypertext Preprocessor”."."<br/>";
?>
</p>
</div>
<div id="ejer_2">
<?php
echo "TRABAJO FINAL"."<br/>";
echo "INTEGRADOR"."<br/>";
echo "PHP Y MySQL"."<br/>";
?>
</div>
<div id="ejer_3">
<?php
$varint=76; $varstr="Esto es un dato tipo \"String\" "; $varbool=TRUE;
echo 'Los siguientes son los valores de las variables de nombre $varint, $varstr y $varbool:'."<br/><br/>";
print $varint."<br/>".$varstr."<br/>".$varbool;
?>
</div>
<div id="ejer_4">
<?php
$primint=45;
$segint=7;
$terint=3;
//operación matemática:
$oper=$primint*$segint/$terint;
print $primint."<br/>";
print $segint."<br/>";
print $terint."<br/>";
echo "$primint * $segint / $terint=$oper";
?>
</div>
</section>
<footer>
<p>Profesora: CH</p></footer>
</footer>
</section>
</body>
</html>
Pero si en el código todos los items están escritos uno junto al otro, el navegador muestra la barra de navegación como fue pensada(todos los items entran en ella)
@charset "utf-8";
/*Google Font: font-family: 'PT Sans', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
/* CSS Document */
body {
font-family:'PT Sans', sans-serif;
background-image:linear-gradient( #ffcfa2fb,#4c3d2efb);
margin: 0px;
background-attachment: fixed;
}
#contenedor {
width:960px;
height:auto;
margin-left:auto;
margin-right:auto;
}
header {
height:290px;
}
h1 {
margin:0 0 0 40px;
color:#020103;
font-family: 'PT Sans', sans-serif;
font-weight: 700;
font-size:3rem;
text-shadow: 3px 3px 8px #e66e0b8d;
}
a {
color:#4b9be1;
text-decoration:none;
}
#botonera_principal {
width:940px;
height:70px;
border-left: 20px solid black;
background-color:#050505;
}
#botonera_principal:hover{
border-left: 20px solid #fe8d0c;
}
#botonera_principal ul {
width:940px;
height:70px;
margin:0;
padding:0;
list-style-type:none;}
#botonera_principal ul li {
display: inline;
width: 187px;
height: 70px;
}
#botonera_principal ul li a {
display: inline-block;
color:#f8f8f8;
text-decoration:none;
text-align: center;
border-right:1px dotted #ffffff;
width: 187px;
height: 70px;
line-height: 70px;
}
#botonera_principal ul li a:hover {
background-color:#e8be64;
}
#marca {
background-image:url(imagenes/fondo_marca.jpg);
height:200px;
padding-top:27px;
border-left:solid 20px black;
}
#marca:hover{
border-left:solid 20px #d23e0d;
}
#contenido {
padding:20px;
background-color:#ffffff70;
border-left: 20px solid black;
}
#contenido:hover{
border-left: 20px solid #b5fcfb;
}
#ejer_1, #ejer_2, #ejer_3, #ejer_4 {
margin: 10px;
padding: 2%;
}
#ejer_1 {
background-color: #ffffcc;
}
#ejer_2 {
background-color: #e6ffcc;
}
#ejer_3 {
background-color: #ccf2ff;
}
#ejer_4 {
background-color: #ffccff;
}
.ajustar {
width: 100%;
}
h2 {
color:#0a0707;}
footer {
background-color:#ffffff;
padding:20px;
border-left: 20px solid black;
}
footer:hover{
border-left: 20px solid #fcf94bfb;
}
footer a {
color:#FFF;
font-weight:bold;}
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>Diseño y Programación WEB</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<section id="contenedor">
<header>
<nav id="botonera_principal">
<ul>
<li><a href="index.php">Home</a></li><li><a href="catalogo.php">Catálogo</a></li><li><a href="noticias.php">Noticias</a></li><li><a href="clientes.php">Clientes</a></li><li><a href="contacto.php">Contáctenos</a></li>
</ul>
</nav>
<div id="marca">
<h1>Diseño y Programación WEB II<br/>IFEE</h1>
</div>
</header>
<section id="contenido">
<h2>Introducción a PHP</h2>
<div id="ejer_1">
<h4>
<?php
echo "Qué es y para qué sirve PHP?"."<br/>";
?>
</h4>
<p>
<?php
echo "PHP es un lenguaje de programación de código abierto del lado del servidor que se utiliza principalmente para crear páginas web dinámicas."."<br/>";
?>
</p>
<p>
<?php
echo "La abreviatura nació originariamente de “Personal Home Page Tools”, aunque hoy en día se ha convertido en el acrónimo recursivo para “PHP: Hypertext Preprocessor”."."<br/>";
?>
</p>
</div>
<div id="ejer_2">
<?php
echo "TRABAJO FINAL"."<br/>";
echo "INTEGRADOR"."<br/>";
echo "PHP Y MySQL"."<br/>";
?>
</div>
<div id="ejer_3">
<?php
$varint=76; $varstr="Esto es un dato tipo \"String\" "; $varbool=TRUE;
echo 'Los siguientes son los valores de las variables de nombre $varint, $varstr y $varbool:'."<br/><br/>";
print $varint."<br/>".$varstr."<br/>".$varbool;
?>
</div>
<div id="ejer_4">
<?php
$primint=45;
$segint=7;
$terint=3;
//operación matemática:
$oper=$primint*$segint/$terint;
print $primint."<br/>";
print $segint."<br/>";
print $terint."<br/>";
echo "$primint * $segint / $terint=$oper";
?>
</div>
</section>
<footer>
<p>Profesora: CH</p></footer>
</footer>
</section>
</body>
</html>
Hay muchas cosas que no entiendo todavía, pero sería correcto decir que los caracteres CR+FL (Enter) tienen un tamaño en pixeles? Hay otra razón por la que se produce esto? Gracias por tomarse el tiempo de leer.