padding-top
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2015ë 7ì.
padding-top CSS ìì±ì ììì ì쪽ì ì쪽 ì¬ë°± ììì ì¤ì í©ëë¤.
ìëí´ ë³´ê¸°
padding-top: 1em;
padding-top: 10%;
padding-top: 20px;
padding-top: 1ch;
padding-top: 0;
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the
western spiral arm of the Galaxy lies a small unregarded yellow sun.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
}
ììì ì쪽 ì¬ë°± ììì ì½í ì¸ ì í ë리 ì¬ì´ì ê³µê°ì ëë¤.
ì°¸ê³ :
padding ìì±ì ì¬ì©íë©´ íëì ì ì¸ì¼ë¡ ë¤ ë°©í¥ ì¬ë°±ì 모ë ì¤ì í ì ììµëë¤.
구문
css
/* <length> ê° */
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;
/* <percentage> ê° */
padding-top: 10%;
/* ì ì ê° */
padding-top: inherit;
padding-top: initial;
padding-top: unset;
padding-top ìì±ì ê°ì ìë ëª©ë¡ ì¤ íëë¡ ì§ì í ì ììµëë¤. ë°ê¹¥ ì¬ë°±marginê³¼ ë¤ë¥´ê², ìì ê°ì ì¬ì©í ì ììµëë¤.
ê°
<length>-
ì¬ë°±ì í¬ê¸°ë¡ ê³ ì ê° ì¬ì©.
<percentage>-
ì¬ë°±ì í¬ê¸°ë¡ 컨í ì´ë ë¸ë¡ ëë¹ì ë°±ë¶ì¨ ì¬ì©.
íì 구문
padding-top =
<length-percentage [0,â]>
<length-percentage> =
<length> |
<percentage>
ìì
css
.content {
padding-top: 5%;
}
.sidebox {
padding-top: 10px;
}
ëª ì¸
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
| ì´ê¸°ê° | 0 |
|---|---|
| ì ì©ëì | all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line. |
| ìì | no |
| Percentages | refer to the width of the containing block |
| ê³ì° ê° | the percentage as specified or the absolute length |
| Animation type | a length |