Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Html: bordi, margini e spaziatura

Spaziatura degli elementi

Esistono, come abbiamo già in parte visto, numerose proprietà legate agli elementi html. Alcune sono ad esempio necessarie per creare una spaziatura tra gli elementi o il loro contenuto (MARGIN e PADDING).

Scrivere:

<div style=‘margin:5px; padding:3px’>… Contenuto del blocco … </div>

ci permette di visualizzare un div che è distanziato di 5px su ogni lato dagli elementi che lo circondano e che inoltre ha una spaziatura interna di 3px rispetto al suo contenuto. E’ possibile in alternativa specificare il margine e il padding per ciascun lato dell’oggetto html, utilizzando le parole chiave top, right, left e bottom:

  • margin-top / padding-top
  • margin-left / padding-left
  • margin-right / padding-right
  • margin-bottom / padding-bottom

Vediamo un esempio che possa chiarire il loro utilizzo:

<body>
	<div style='margin:15px; padding:10px; background-color:#FF0000'>
		Questo div ha un margine di 15px e un padding di 10px...
	</div>
	<div style='margin-top:15px; padding:5px; background-color:#CCCCCC'>
		Questo div ha un margine di 15px e un padding di 10px...
	</div>
</body>

Nel codice html abbiamo definito due div:

  • il primo ha un margine di 15px e un padding di 10px;
  • il secondo ha un margine solo superiore di 15px e un padding di 5px.

Quando non viene specificato un margine, come nel secondo div, o un padding, ogni browser applica di default alcune regole di visualizzazione.
Ad esempio, per un div, Internet Explorer applica un margine di 2px e un padding di 1px su ogni lato.
Vediamo infine come il codice viene visualizzato nella finestra del browser.

Margini Html

Bordi degli elementi

Oltre che impostare colori, dimensioni e margini per gli elementi html, è possibile definire un bordo specificando lo spessore, il colore e il tipo di linea.
La proprietà in questione è BORDER e la sintassi è:

<div style=“border:2px  solid #FF0000”> … Contenuto del blocco … </div>

Il div in questione avrà un bordo si 2px con una linea di tipo solid e di colore rosso. Anche per border è possibile specificare un bordo diverso per ciascun lato utilizzando le parole chiave top, left, right e bottom.
E’ importante prestare attenzione alla sintassi utilizzata, infatti la proprietà border accetta tre parametri (dimensione, tipo linea e colore) separati da uno spazio. In alternativa però è possibile utilizzare la proprietà anche in maniera più semplice, scrivendo:

<div style=“border:2px ”> … Contenuto del blocco … </div>

In questo caso stiamo impostando esclusivamente la dimensione del bordo (2px), lasciando al browser e alle sue regole di defaul, la scelta del colore (solitamente nero) e del tipo di linea (solitamente solida).

Vediamo quindi un esempio che possa chiarire l’uso della proprietà border:

<body>
	<div style='background-color:#FF0000; border 2px solid #000000'>
		 Questo div ha un bordo solido di 2px e di colore nero
	</div>
        <div style='background-color:#CCCCCC; border 5px solid #FF0000'>
		Questo div ha un bordo solido di 5px e di colore rosso
	</div>
</body>

Il risultato è il seguente:

Bordi Html

Come annunciato in precedenza, esistono diverse tipologie di linea per i border:

  • Solid (linea solida)
  • Dotter (linea punteggiata)
  • Dashed (linea tratteggiata)
  • Double (linea doppia)
  • Ridge (linea in rilievo)

La sintassi resta invariata, per una bordo di tipo dotter scriveremo:

<div style=“border:2px  dotter #FF0000”> … Contenuto del blocco … </div>

Tipi di bordi Html

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×