La propiedad de visualización en CSS es una propiedad muy útil y de uso común que contiene muchos valores. Este artículo contiene la propiedad display:inline y display:inline-block .
Propiedad “display: inline”: esta propiedad se usa para mostrar un elemento como un elemento en línea (como <span>). Las propiedades de alto y ancho no se ven afectadas en display:inline; propiedad. Solo permite el lado izquierdo y derecho de los márgenes, no superior e inferior. En palabras simples, no tiene salto de línea antes y después de sus elementos vecinos y permite HTML junto a él.
Sintaxis:
element {
display: inline;
// CSS property
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>display:inline; property</title>
<style>
p {
color: green;
}
.gfg {
display: inline;
padding: 15px 15px;
border: 1px solid black;
color:white;
background-color:green;
}
div {
text-align:justify;
}
h1 {
color:green;
}
h1, h2 {
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>display: inline; property</h2>
<div>Prepare for the Recruitment drive of product based
companies like <span class = "gfg">Microsoft, Amazon,
Adobe</span> etc with a free online placement preparation
course. The course focuses on various MCQ's & Coding question
likely to be asked in the interviews & make your upcoming
placement season efficient and successful.
</div>
</body>
</html>
Producción:
Propiedad “display: inline-block”: esta propiedad se utiliza para mostrar un elemento como un contenedor de bloque de nivel en línea. El elemento en sí está formateado como un elemento en línea, pero puede aplicar valores de alto y ancho. Se coloca como un elemento en línea (en la misma línea que el contenido adyacente). Parece un elemento en línea pero se comporta como un elemento de bloque y no fuerza el salto de línea.
Sintaxis:
element {
display: inline-block;
// CSS property
}
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>display:inline-block; property</title>
<style>
p {
color: green;
}
.gfg {
display: inline-block;
padding: 15px 15px;
border: 1px solid black;
color:white;
background-color:green;
}
div {
text-align:justify;
}
h1 {
color:green;
}
h1, h2 {
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>display: inline-block; property</h2>
<div>Prepare for the Recruitment drive of product based
companies like <span class = "gfg">Microsoft, Amazon,
Adobe</span> etc with a free online placement preparation
course. The course focuses on various MCQ's & Coding question
likely to be asked in the interviews & make your upcoming
placement season efficient and successful.
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA