Caja de diálogo CSS

Con este HTML y CSS puedes montar cajas de diálogo como si fueran bocadillos de cómic.

Esto es un texto en un bocadillo.

.card {
    margin-left: 45px;
    padding: 17px 22px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    font-size: 13px;
    line-height: 1.5;
    position: relative;
}
.card:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 13px 5px;
    border-color: transparent transparent #fff;
}
	<div class="card">
		<p>Esto es un texto en un bocadillo.</p>
	</div>
Metodología CSS BEM

Metodología CSS BEM

En la terminología de BEM (https://www.espai.es/blog/2016/07/metodologias-css-oocss-bem-smacss/), un bloque es un componente de interfaz de usuario independiente, modular. Un bloque puede estar compuesto de varios elementos HTML, o incluso varios bloques. Un ejemplo de un bloque podría ser un menú de navegación o un formulario de búsqueda. Un elemento es un componente de un bloque. Un elemento sirve un propósito singular. Por ejemplo, si tenemos un bloque de menú de navegación, sus elementos podrían ser los elementos de la lista (elementos li) y los links (elementos a). Un modificador es una clase css que cambia la presentación de un bloque o un elemento.

Encontrar elementos que sobresalen

Encontrar elementos que sobresalen

# Script para encontrar los elementos que provocan el margen blanco

Ejecuta este script en la consola del navegador para encontrar los elementos HTML que sobresalen del document.