Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah ruang dalam css
Cara menambah ruang menggunakan CSS
Dalam CSS, terdapat banyak cara untuk menambah ruang. Kaedah yang paling biasa digunakan adalah seperti berikut:
1 Gunakan atribut margin dan padding
padding
digunakan untuk menambah ruang di luar elemen. Nilai berikut untuk kedua-dua atribut ini boleh digunakan: margin
用于在元素外部添加空格,而 padding
用于在元素内部添加空格。可以使用这两种属性的以下值:
margin: 10px;
margin: 10%;
margin: 1em;
2. 使用 display: flex 或 display: grid
display: flex
和 display: grid
属性可让您灵活地布局元素,包括添加空格。通过设置 justify-content
和 align-items
等属性,您可以控制元素在其容器内的排列方式,从而创建空格。3. 使用 white-space 属性
white-space
属性控制换行符、制表符和空格在元素中的处理方式。通过设置 white-space: pre
,您可以保留HTML 中的空格和换行符,从而在元素内创建空格。4. 使用非破坏性空格 (nbsp;)
Pixel (px) : Tentukan saiz piksel ruang, seperti margin: 10px
Peratus (%; )
: Tentukan saiz relatif ruang Peratusan saiz elemen induk, sepertimargin: 10%;
🎜🎜🎜em🎜: Tentukan gandaan ruang berbanding saiz fon daripada elemen, seperti margin: 1em;
🎜🎜 🎜🎜🎜🎜2 Gunakan paparan: flex atau paparan: grid🎜🎜🎜🎜justify-content
dan align-items
, anda boleh mengawal cara elemen disusun dalam bekasnya, mewujudkan ruang putih. 🎜🎜🎜🎜3 Gunakan atribut ruang putih 🎜🎜🎜🎜ruang putih: pra
, anda boleh mengekalkan ruang putih dan aksara baris baharu dalam HTML, mewujudkan ruang putih dalam elemen. 🎜🎜🎜🎜4. Gunakan ruang kosong tanpa putus (nbsp;)🎜🎜🎜🎜<code class="css">/* 使用 margin 和 padding 添加空格 */ .element { margin: 10px; padding: 10px; } /* 使用 display: flex 添加空格 */ .container { display: flex; justify-content: space-between; } /* 使用 white-space 属性保留空格 */ pre { white-space: pre; } /* 使用 插入非破坏性空格 */ .name { John Doe }</code>
Atas ialah kandungan terperinci Bagaimana untuk menambah ruang dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!