cari
Rumahhujung hadapan webtutorial csscss中padding填充详解

css中padding填充详解

Mar 25, 2017 pm 03:34 PM

语法:

padding:[ d82af2074b26fcfe177e947839b5d381 | 42c97a047d75abc12b9b351eb8562711 ]{1,4}

默认值:看每个独立属性

适用于:所有元素,除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外

继承性:无

动画性:是

计算值:看每个独立属性

相关属性:[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]

取值:

  • d82af2074b26fcfe177e947839b5d381: 用长度值来定义内补白。不允许负值

  • 42c97a047d75abc12b9b351eb8562711: 用百分比来定义内补白。水平(默认)书写模式下,参照其包含块 width进行计算,其它情况参照 height 。不允许负值

说明:

检索或设置对象四边的内部边距。

  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

  • 如果只提供一个,将用于全部的四边。

  • 如果提供两个,第一个用于上、下,第二个用于左、右。

  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

  • 非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁;若要设置上、下两边的内补丁,必须先使该对象表现为块级或内联块级。

  • 对应的脚本特性为padding

TRBL


image

引申: margin,border

padding的值缩写

padding : 20px;  ==  padding : 20px 20px 20px 20px;

padding : 20px 10px;  == padding : 20px 10px 20px 10px;

padding : 20px 10px 30px == padding : 20px 10px 30px 10px;

对面相等,后者省略; 4面相等,只设一个

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>padding 填充</title>
    <style type="text/css">
    p,span{
        border: 1px dashed red;
    }    
    .sample0{
        padding: 20px;
    }
    .sample1{
        padding: 40px 30px 20px 10px;
    }
    .sample2{
        padding: 20px 10px 20px;
    }
  
    .parent{
        padding:20px;
    }
   
   .child{
       border: 1px solid blue;
   }
    </style></head><body>
    <p class="sample0">sample</p><br>
    <p class="sample1">sample</p>
    <br>
    <p class="sample2">sample</p>
    <br>
    <p class="parent">
        <p class="child">child </p>
    </p></body></html>

Atas ialah kandungan terperinci css中padding填充详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Di manakah 'Langgan Podcast' pautan ke?Di manakah 'Langgan Podcast' pautan ke?Apr 16, 2025 pm 12:04 PM

Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:

Kepelbagaian enjin pelayarKepelbagaian enjin pelayarApr 16, 2025 pm 12:02 PM

Kami kehilangan opera ketika mereka pergi Chrome pada tahun 2013. Sama dengan Edge ketika ia juga menjadi Chrome awal tahun ini. Mike Taylor memanggil perubahan ini "menurun

Pertimbangan UX untuk Perkongsian WebPertimbangan UX untuk Perkongsian WebApr 16, 2025 am 11:59 AM

Dari laman web Trashy Clickbait hingga paling banyak penerbitan, butang saham telah lama di mana -mana di seluruh web. Namun ia boleh dikatakan bahawa ini

Berita Platform Mingguan: Apple Menggunakan Komponen Web, Rendering HTML Progresif, Sumber Kritikal SendiriBerita Platform Mingguan: Apple Menggunakan Komponen Web, Rendering HTML Progresif, Sumber Kritikal SendiriApr 16, 2025 am 11:55 AM

Dalam roundup minggu ini, Apple masuk ke dalam komponen web, bagaimana Instagram adalah skrip insta-loading, dan beberapa makanan untuk difikirkan untuk sumber kritikal sendiri.

Pathspec git dan cara menggunakannyaPathspec git dan cara menggunakannyaApr 16, 2025 am 11:53 AM

Apabila saya melihat melalui dokumentasi arahan git, saya perhatikan bahawa banyak daripada mereka mempunyai pilihan untuk. Saya pada mulanya berpendapat bahawa ini hanya

Pemetik warna untuk gambar produkPemetik warna untuk gambar produkApr 16, 2025 am 11:49 AM

Bunyi seperti masalah yang sukar tidak? Kami sering tidak mempunyai tembakan produk dalam beribu -ribu warna, supaya kita dapat membalikkannya. Kami juga tidak

Mod gelap bertukar -tukar dengan reaksi dan temaMod gelap bertukar -tukar dengan reaksi dan temaApr 16, 2025 am 11:46 AM

Saya suka apabila laman web mempunyai pilihan mod gelap. Mod gelap menjadikan laman web lebih mudah bagi saya untuk membaca dan membantu mata saya berasa lebih santai. Banyak laman web, termasuk

Beberapa tangan dengan elemen dialog HTMLBeberapa tangan dengan elemen dialog HTMLApr 16, 2025 am 11:33 AM

Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)