Padding in percentuale

[LucianoS]

ciao
ho due <div>
nel primo (sopra) viene scritto il titolo del post
nel secondo, sotto, il post vero e proprio.

Può capitare che il titolo del post sia lungo anche due righe e perciò va molto vicino al post vero e proprio.

Ho applicato al titolo questa regola:
padding: 40px

ma se il titolo è su una sola riga, prima che cominci il post c'è un bel pò di spazio vuoto.

Come si può fare per distanziare dinamicamente il titolo dal post? ho provato con
padding: 4%
ma il risultato è più meno lo stesso

[Mich_]

Posta il codice, perche` la tua spiegazione contiene delle lacune.

Comunque la sintassi che usi non e` semanticamente corretta.

Prova ad usare una cosa di questo tipo:

<div class="contenitore">
  <h2>Il tuo titolo</h2>
  <p>il testo del tuo articolo</p>
</div>

Sia <h..> che <p> sono oggetti di tipo blocco, per cui puoi definirne dimensioni margini e padding, se necessario

[LucianoS]

Posta il codice, perche` la tua spiegazione contiene delle lacune.

Comunque la sintassi che usi non e` semanticamente corretta.

Prova ad usare una cosa di questo tipo:

<div class="contenitore">
  <h2>Il tuo titolo</h2>
  <p>il testo del tuo articolo</p>
</div>

Sia <h..> che <p> sono oggetti di tipo blocco, per cui puoi definirne dimensioni margini e padding, se necessario

questo è il codice che sto usando

<div class="post"><h2 class="title">qui il titolo del post abbastanza lungo da andare su due righe</h2>
                        <div class="entry">
                            <p>Testo del post... lorem ipsum</p>
                        </div>
                    </div>

css:

.post {
    margin-bottom: 6px;
    border-bottom: 1px #000000;
}

.post .title {
    height: 35px;
    padding: 10px 0px 0px 0px;
}

.post .entry {
    padding: 40px 10px 10px 30px;
    padding-bottom: 20px;
}

[Mich_]

Hai qualche elemento inutile. Non e` solo un prob di semantica, ma complicando la struttura vai a complicare anche la formattazione.

Ecco la stessa cosa, senza elementi inutili e con una semantica corretta

HTML:

<div class="post">
  <h2 class="title">qui il titolo del post abbastanza lungo da andare su due righe</h2>
    <p class="entry">Testo del post... lorem ipsum</p>
</div>


CSS:

.post {
  margin: 0 0 6px 0;
  border-bottom: 1px #000;

.post h2 {
  /* height: 35px;       questo non ci va - e` quello che ti genera l'errore */
  padding: 10px 0 0 0;
  background-color: red;     /* solo per le prove, per verificare al dimensione dei vari oggetti */
}

.post p {
  padding: 40px 10px 20px 30px;
  /* padding-bottom    questo sovrascrive la dichiaraz precedente - e` inutile */
  background-color: blue;  /* solo per le prove, per verificare al dimensione dei vari oggetti */
}

[LucianoS]

grazie! l'ho provato!