A belső margó megadása oldalanként

Egy HTML elem belső margójának szélessége mind négy oldalán különböző lehet.

A felső belső margó szélességének beállítása:

kijelölő

{

padding-top

kulcsszó/méret;

}

A jobboldali belső margó szélességének megadása:

kijelölő

{

padding-right

kulcsszó/méret;

}

Az alsó belső margó szélességének megadása:

kijelölő

{

padding-bottom

kulcsszó/méret;

}

A baloldali belső margó szélességének megadása:

kijelölő

{

padding-left

kulcsszó/méret;

}

Példa:

Forráskód


<style>
    .div_1 { height:100%;  width: 100%;
                 margin:0; padding:0;
                 border:0 solid red;
                 background-color:#33aacc;}                  
    .div_2 { height:80px;  width: 160px;
                 margin:1px; 	
                 border:1px solid red;
                 background-color:yellow;
                 padding-top:5px;
                 padding-right:10px;
                 padding-bottom:15px;   
                 padding-left:20px; }      
</style>     
….
<body>            
   <div class="div_2"> 
        <div class="div_1">
               5px 10px 15px 20px
        </div>
   </div>
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_belso_margo_1.html