Estilo propiedad padding DOM HTML
Objetos de estilo Definición y Uso
el relleno de conjuntos de propiedades o devuelve el elemento de relleno.
Esta propiedad se puede utilizar 1-4 tipos de valores:
- Si se especifica un valor, por ejemplo: div {padding: 50px} - todo dentro de los cuatro márgenes son 50px.
- Si se especifican ambos valores, por ejemplo: div {padding: 50px 10px} - márgenes superior e inferior de Nene es 50px, los márgenes izquierdo y derecho y el relleno es 10px.
- Si especifica tres valores, por ejemplo: div {padding: 50px 10px 20px} - dentro de los márgenes son 50px, los márgenes derecho e izquierdo y relleno es 10px, el relleno de fondo es de 20 píxeles.
- Si especifica cuatro tipos de valores, tales como: div {padding: 50px 10px 20px 30px} - dentro del margen es 50px y 10px relleno derecho es, el relleno de fondo es de 20 píxeles, los márgenes izquierdos son 30px.
gramática
Configuración de las propiedades de relleno:
propiedades de relleno para la espalda:
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比内边距。 |
| length | 使用 px、cm 等单位定义内边距的宽度。 |
| inherit | 内边距从父元素继承。 |
Soporte para el navegador
Todos los principales navegadores soportan propiedades de relleno.
Nota: Internet Explorer 7 y versiones anteriores no son compatibles con el valor "heredar".IE8 sólo proporciona! DOCTYPE apoyado "hereda". apoyo IE9 "hereda".
Notas y sugerencias
propiedades de los márgenes y las propiedades de relleno se insertan en el espacio alrededor del elemento. Sin embargo, la diferencia está, el margen se inserta en el espacio alrededor del exterior de la frontera, el espacio inserciones de relleno dentro de la frontera elemento.
Ejemplos
Ejemplos
Cambiar div elementos dentro de los márgenes:
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>
<div id="ex1">这是一些文本。</div>
<br>
<button type="button" onclick="changeMargin()">修改div元素的外边距</button>
<br>
<br>
<div id="ex2">这是一些文本。</div>
<br>
<button type="button" onclick="changePadding()">修改div元素的内边距</button>
</body>
</html>
Trate »
Objetos de estilo