O acolchado CSS é unha das propiedades do modelo de caixa CSS . Esta propiedade de taquigrafía establece o recheo de todos os catro lados dun elemento HTML. O acolchado CSS pódese aplicar a case todas as etiquetas HTML (excepto para algunhas das etiquetas da táboa). Ademais, os catro lados do elemento poden ter un valor diferente.
Propiedade de recheo CSS
Para usar a propiedade de recheo CSS abreviatura, pode usar o mnemónico "TRouBLe" (ou "TRiBbLe" para ti os fans de Star Trek). Isto significa arriba , dereita , inferior e esquerda e refírese á orde dos anchos de recheo que estableceu na propiedade de taquigrafía. Por exemplo:
padding: arriba á dereita á esquerda inferior; padding: 1px 2px 3px 6px;Se usou os valores enumerados anteriormente, aplicaríase un valor de padding diferente a cada lado do elemento HTML que o aplique. Se desexa aplicar o mesmo en todos os catro lados, pode simplificar o seu CSS e só escribir un valor:
padding: 12 píxeles;Con esa liña de CSS, aplicaríanse 12 píxeles de padding a todos os 4 lados do elemento.
Se quere que o recheo sexa o mesmo para a parte superior e inferior e esquerda e dereita, pode escribir dous valores:
padding: 24px 48px;O primeiro valor (24 px) aplicábase á parte superior e inferior, mentres que o segundo aplicábase á esquerda e á dereita.
Se escribe tres valores, fará que o aliñamento horizontal (á esquerda e á dereita) sexa o mesmo, mentres se modifica a parte superior e inferior:
padding: parte superior dereita e esquerda; padding: 0px 1px 3px;De acordo co modelo da caixa CSS, o recheo é o máis próximo ao elemento / contido en si. Isto significa que o acolchado engádese a un elemento entre o ancho ou o alto do contido e os valores de borde que utilice. Se o recheo está definido en cero, ten o mesmo bordo que o contido.
Valores de recheo CSS
O recheo CSS pode levar calquera valor de lonxitude non negativo. Asegúrese de especificar a medida, como px ou em. Tamén pode especificar unha porcentaxe para o seu enchido, que será unha porcentaxe do ancho do bloque que contén o elemento. Isto inclúe o recheo superior e inferior. Por exemplo:
#container {width: 800px; altura: 200 píxeles; } #container p {ancho: 400px; altura: 75%; padding: 25% 0; }A altura do parágrafo dentro do elemento #container será o 75% da altura do #container máis un 25% do ancho para o recheo superior e o 25% do ancho para o recheo inferior. Isto equivale a 300 + 200 + 200 = 700px.
Efectos da adición de recheo CSS
Nos elementos de nivel de bloqueo , aplícaselle o acolchado nos catro lados. Xa que o elemento é un bloque ou unha caixa xa, o recheo aplícase aos lados da caixa.
Cando o acolchado CSS engádese aos elementos en liña , pode haber algunha superposición de elementos arriba e abaixo do elemento en liña se o acolchado vertical supera a altura da liña, pero non empurrará a altura da liña. O recheo horizontal CSS aplicado aos elementos en liña engadirase ao comezo do elemento e ao final do elemento. E o recheo pode engadir liñas. Pero non se aplicará a todas as liñas dun elemento de varias liñas, polo que non podes usar o recheo para sangrar un segmento de contido en liña multi-liña.
Tamén, en CSS2.1, non se poden crear bloques de contedores onde o ancho depende dun elemento con porcentaxes de ancho (ou ancho de recheo). Se fai o resultado non está definido. Os navegadores seguirán mostrando os contidos, pero non pode obter os resultados que espera. Se pensa niso, ten sentido, coma se o elemento do seu contedor necesite coñecer o ancho dos seus elementos fillos para definir a súa anchura, como cando non ten un ancho definido previamente e un ou máis ten un ancho definido como unha porcentaxe do elemento do contedor, esta configura unha cadea circular sen resposta. Se usa porcentaxes para ancho de calquera cousa no documento, debe asegurarse de que tamén se definen os anchos do elemento primario.