La propiedad height se utiliza para establecer la altura de un elemento. La propiedad de altura no contiene relleno, margen ni borde del elemento. La propiedad de altura contiene muchos valores que definen la altura de un elemento. Los valores de la propiedad de altura se enumeran a continuación:
Sintaxis:
height: length|percentage|auto|initial|inherit;
Valores de propiedad:
- altura: automático; Se utiliza para establecer la propiedad de altura en su valor predeterminado. Si la propiedad de altura se establece en automático, el navegador calcula la altura del elemento.
- altitud longitud; Se utiliza para establecer la altura del elemento en forma de px, cm, etc. La longitud no puede ser negativa.
- altura: inicial; Se utiliza para establecer la propiedad de altura en su valor predeterminado.
- altura: heredar; Se utiliza para establecer la propiedad de altura desde su elemento principal.
Ejemplo 1: este ejemplo usa height: auto; propiedad para mostrar el contenido.
html
<!DOCTYPE html>
<html>
<head>
<!-- style to set height property to
display content -->
<style>
p {
color:white;
}
.main {
background-color:black;
height:auto;
border-radius: 20px 20px 0px 0px;
}
.left-column {
background-color:indigo;
height:120px;
width:49%;
float:left;
border-bottom-left-radius: 20px;
}
.right-column{
background-color:green;
height:7.5em;
width:49%;
float:right;
border-bottom-right-radius: 20px;
}
h1{
color:Green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div class="main">
<p>
Also, any geeks can help other geeks by writing
articles on the GeeksforGeeks, publishing articles
follow few steps that are Articles that need
little modification/improvement from reviewers
are published first. To quickly get your articles
reviewed, please refer existing articles, their
formatting style, coding style, and try to make
you are close to them.
</p>
</div>
<div class="left-column">
<p>
It is a good platform to learn programming. It
is an educational website. Prepare for the
Recruitment drive of product based companies
like Microsoft, Amazon, Adobe etc with a free
online placement preparation course.
</p>
</div>
<div class="right-column">
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
Producción
Ejemplo 2: Este ejemplo usa la propiedad height:Heredar para mostrar el contenido.
html
<!DOCTYPE html>
<html>
<head>
<!-- CSS style to set height property of content -->
<style>
.auto {
height:auto;
background-color:orange;
}
.inherit {
height:inherit;
background-color:cyan;
}
.percentage {
height:25%;
}
h1 {
color:green;
}
</style>
</head>
<body style = "text-align:center;">
<h1>GeeksforGeeks</h1>
<div class="auto">
<p>
Also, any geeks can help other geeks by writing
articles on the GeeksforGeeks, publishing articles
follow few steps that are Articles that need
little modification/improvement from reviewers
are published first. To quickly get your articles
reviewed, please refer existing articles, their
formatting style, coding style, and try to make
you are close to them.
</p>
<div class="inherit">
<p>
It is a good platform to learn programming. It
is an educational website. Prepare for the
Recruitment drive of product based companies
like Microsoft, Amazon, Adobe etc with a free
online placement preparation course.
</p>
</div>
<div class="percentage">
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA