Skip to main content
Formato de código, ortografía.
Origen Enlace
jachguate
  • 32.1k
  • 8
  • 41
  • 69

He querido aplicar un borde inferior (a modo de subrayado) para un encabezadencabezado. Para que el "subrayado" ocupara solo el ancho del texto se me ha ocurrido convertir la etiquita en inlineinline (no se si hay otra manera desde CSS).

El problema es que intento centrar este encabezado con margin:0 auto y no se centra. Pq¿Por qué?

AdemasAdemás no entiendo porquepor qué, al aplicar un float al parrafopárrafo, este se sube hasta la altura del encabezado, ya que pensaba que el float se genera desde la etiqueta en la que se aplica hacia abajo (he indicado el borde rojo para que se vea mas claro su borde superior).

<!DOCTYPE html>
<html lang="en"> <!--Se elige "en" para construir la pagina en ingles-->
<head>
        
<title>Uso de la propiedad display</title>

<style>
html{background-color:blue;}

body{width:60%;
background-color:gray;

margin:0 auto;
padding:30px;}

h1{border-bottom:3px dashed black;
                
display:inline;
                
margin:0px auto
font-size:2rem;}

p{ font-size:2rem;
width:50%;
float:right;
border:1px solid red;}

img{border:10px solid black;
margin-top:20px;}
</style>
</head>

<body>

<h1>Rio: Curso de agua</h1>

<p>Un río o flujo de agua es una corriente natural de agua que fluye con continuidad por un cauce en la superficie terrestre. Posee un caudal determinado, rara vez es constante a lo largo del año, y desemboca en el mar, en un lago o en otro río, en cuyo caso se denomina afluente.</p>
    
<img src="rioAmazonas.jpg" title="Rio Amazonas" width="40%">
        
</body>
</html>

<!DOCTYPE html>
<html lang="en"> <!--Se elige "en" para construir la pagina en ingles-->
<head>
        
<title>Uso de la propiedad display</title>

<style>
html{background-color:blue;}

body{width:60%;
background-color:gray;

margin:0 auto;
padding:30px;}

h1{border-bottom:3px dashed black;
                
display:inline;
                
margin:0px auto
font-size:2rem;}

p{ font-size:2rem;
width:50%;
float:right;
border:1px solid red;}

img{border:10px solid black;
margin-top:20px;}
</style>
</head>

<body>

<h1>Rio: Curso de agua</h1>

<p>Un río o flujo de agua es una corriente natural de agua que fluye con continuidad por un cauce en la superficie terrestre. Posee un caudal determinado, rara vez es constante a lo largo del año, y desemboca en el mar, en un lago o en otro río, en cuyo caso se denomina afluente.</p>
    
<img src="rioAmazonas.jpg" title="Rio Amazonas" width="40%">
        
</body>
</html>

He querido aplicar un borde inferior (a modo de subrayado) para un encabezad. Para que el "subrayado" ocupara solo el ancho del texto se me ha ocurrido convertir la etiquita en inline (no se si hay otra manera desde CSS).

El problema es que intento centrar este encabezado con margin:0 auto y no se centra. Pq?

Ademas no entiendo porque al aplicar un float al parrafo este se sube hasta la altura del encabezado, ya que pensaba que el float se genera desde la etiqueta en la que se aplica hacia abajo (he indicado el borde rojo para que se vea mas claro su borde superior).

<!DOCTYPE html>
<html lang="en"> <!--Se elige "en" para construir la pagina en ingles-->
<head>
        
<title>Uso de la propiedad display</title>

<style>
html{background-color:blue;}

body{width:60%;
background-color:gray;

margin:0 auto;
padding:30px;}

h1{border-bottom:3px dashed black;
                
display:inline;
                
margin:0px auto
font-size:2rem;}

p{ font-size:2rem;
width:50%;
float:right;
border:1px solid red;}

img{border:10px solid black;
margin-top:20px;}
</style>
</head>

<body>

<h1>Rio: Curso de agua</h1>

<p>Un río o flujo de agua es una corriente natural de agua que fluye con continuidad por un cauce en la superficie terrestre. Posee un caudal determinado, rara vez es constante a lo largo del año, y desemboca en el mar, en un lago o en otro río, en cuyo caso se denomina afluente.</p>
    
<img src="rioAmazonas.jpg" title="Rio Amazonas" width="40%">
        
</body>
</html>

He querido aplicar un borde inferior (a modo de subrayado) para un encabezado. Para que el "subrayado" ocupara solo el ancho del texto se me ha ocurrido convertir la etiquita en inline (no se si hay otra manera desde CSS).

El problema es que intento centrar este encabezado con margin:0 auto y no se centra. ¿Por qué?

Además no entiendo por qué, al aplicar un float al párrafo, este se sube hasta la altura del encabezado, ya que pensaba que el float se genera desde la etiqueta en la que se aplica hacia abajo (he indicado el borde rojo para que se vea mas claro su borde superior).

<!DOCTYPE html>
<html lang="en"> <!--Se elige "en" para construir la pagina en ingles-->
<head>
        
<title>Uso de la propiedad display</title>

<style>
html{background-color:blue;}

body{width:60%;
background-color:gray;

margin:0 auto;
padding:30px;}

h1{border-bottom:3px dashed black;
                
display:inline;
                
margin:0px auto
font-size:2rem;}

p{ font-size:2rem;
width:50%;
float:right;
border:1px solid red;}

img{border:10px solid black;
margin-top:20px;}
</style>
</head>

<body>

<h1>Rio: Curso de agua</h1>

<p>Un río o flujo de agua es una corriente natural de agua que fluye con continuidad por un cauce en la superficie terrestre. Posee un caudal determinado, rara vez es constante a lo largo del año, y desemboca en el mar, en un lago o en otro río, en cuyo caso se denomina afluente.</p>
    
<img src="rioAmazonas.jpg" title="Rio Amazonas" width="40%">
        
</body>
</html>

Origen Enlace

No consigo centrar el encabezado

He querido aplicar un borde inferior (a modo de subrayado) para un encabezad. Para que el "subrayado" ocupara solo el ancho del texto se me ha ocurrido convertir la etiquita en inline (no se si hay otra manera desde CSS).

El problema es que intento centrar este encabezado con margin:0 auto y no se centra. Pq?

Ademas no entiendo porque al aplicar un float al parrafo este se sube hasta la altura del encabezado, ya que pensaba que el float se genera desde la etiqueta en la que se aplica hacia abajo (he indicado el borde rojo para que se vea mas claro su borde superior).

<!DOCTYPE html>
<html lang="en"> <!--Se elige "en" para construir la pagina en ingles-->
<head>
        
<title>Uso de la propiedad display</title>

<style>
html{background-color:blue;}

body{width:60%;
background-color:gray;

margin:0 auto;
padding:30px;}

h1{border-bottom:3px dashed black;
                
display:inline;
                
margin:0px auto
font-size:2rem;}

p{ font-size:2rem;
width:50%;
float:right;
border:1px solid red;}

img{border:10px solid black;
margin-top:20px;}
</style>
</head>

<body>

<h1>Rio: Curso de agua</h1>

<p>Un río o flujo de agua es una corriente natural de agua que fluye con continuidad por un cauce en la superficie terrestre. Posee un caudal determinado, rara vez es constante a lo largo del año, y desemboca en el mar, en un lago o en otro río, en cuyo caso se denomina afluente.</p>
    
<img src="rioAmazonas.jpg" title="Rio Amazonas" width="40%">
        
</body>
</html>

Un saludo