Div con bordi interni

[samiel]

Dovrei riprodurre qualcosa di simile a questo:
Schermata_20251122_113234.png
Ora, se cerco di creare un div con bordi non al confine, ma all'interno del div stesso con:

.square{background-color:red; border-top:5px solid black; border-bottom:5px solid black padding:-20px; padding:20px;}

il padding nonfunziona e il bordo scompare.
Se metto il bordo al titolo <h1> esso lascia fuori il logo, che invece dovrebbe anch'esso avere il bordo continuo con il titolo:

.associated{display:flex; align-items:left; background-color:#EFEEE6; padding:20px;}

.associated h1 {padding:20px; font-size:3em; font-weight:normal; border-top: 2px solid grey; border-bottom: 2px solid grey; }

.associated img{max-width:100%; height:auto; top:50%; margin-right:10px; }

e l'immagine risulta di dimensioni e proporzioni anomale:
Schermata del 2025-11-22 13-02-31.png
Dunque sono molte le cose su cui sbaglio...
Qualche spunto su come affrontare il mio problema?
Grazie
m

[KillerWorm]

Certamente puoi applicare il bordo ad un <div> che contiene il tutto, ma il primo CSS che hai postato presenta qualche errore di sintassi.
Consiglio di verificare sempre attraverso eventuale validatore direttamente nel tuo editor oppure online (vedi questo validatore)

Se non riesci a risolvere posta anche il codice HTML assieme al CSS ad esso applicato, così da permettere agli altri di riprodurre esattamente il problema e capire come poterti aiutare.

Saluti

[samiel]

Grazie della replica. Ho corretto alcuni errori. Ho provato con un <div> inserito in un <div>.
Con questo codice CSS:

.outsider{background-color:#EFEEE6; padding:20px;}

.insider{display:flex; background-color:#EFEEE6;  }

.maintitle{padding:10px; font-size:2.6em; font-weight:normal; color:green; border-top: 2px solid #989898; border-bottom: 2px solid #989898;}

.imglogo {width:40px; height:40px; padding:10px; top:50%}

e questo HTML:

<div class="outsider">

<div class="insider">

<img class="imglogo" src="./xampp/favicon.png" alt="Logo XAMPP">

<h1 class="maintitle"><strong>XAMPP</strong> Apache</em> + MariaDB + PHP + Perl</h1> </p>

</div>
</div>

mi avvicino al risultato voluto, tranne che per l'immagine che è decisamente fuori posto:
Schermata del 2025-11-22 20-51-10.png
L'immagine dovrebbe posizionarsi a sinistra del testo alla medesima altezza e avere anch'essa il bordo continuo.
Inoltre i validatore W3C mi avverte che: "Value Error : display flex is not a display value : flex flex" e non capisco come rimediare...
m

[samiel]

Chiedo scusa. Ovviamente:

<h1 class="maintitle"><strong>XAMPP</strong> Apache</em> + MariaDB + PHP + Perl</h1> </p>

è in realtà

<h1 class="maintitle"><strong>XAMPP</strong> Apache + MariaDB + PHP + Perl</h1>

m

[samiel]

Il corretto allineamento si ha con questo codice CSS:

h1{padding:10px; font-size:2.6em; font-weight:normal; color:red; border-top:2px solid #989898;  border-bottom:2px solid #989898}

.title-wrap {  display:flex;
  justify-content:left;
  align-items:center;
  background-color:#EFEEE6;
  padding:20px;
}

.img-wrap{
  border-top: 2px solid #989898; padding:10px;
  border-bottom: 2px solid #989898; padding:10px;
  }

e quindi con HTML:

<div class="title-wrap">
<img class="img-wrap" src="./xampp_pics/favicon.png" alt="Logo XAMPP">
<h1><strong>XAMPP</strong> Apache + MariaDB + PHP + Perl</h1>
</div>

Quello che ancora non funziona è il bordo sopra e sotto l'immagine, che a seconda del browser (io ho provato CHrome, Firefox e Safari) risulta discontinuo (sempre con Firefox, a certi zoom come 175% con Chrome quando il titolo va a capo per l'ingrandimento del font di h1) rispetto al bordo del titolo:
Schermata del 2025-11-23 10-41-39.png

m

[KillerWorm]

Andiamo per ordine

se cerco di creare un div con bordi non al confine, ma all'interno del div stesso

in quell'immagine non penso siano usati "bordi interni" (come tu li definisci). Immagino piuttosto che si tratti di un contenitore (ad esempio un <div>) a cui sono stati applicati regolari bordi (superiore e inferiore), che normalmente sono disegnati al confine dell'elemento stesso. E' plausibile che il colore di sfondo non sia applicato direttamente a quel <div> ma piuttosto ad un ulteriore elemento che lo contiene, e che tale <div> abbia quindi un margine applicato per creare uno spazio attorno ad esso.

Partendo da questo punto, può essere corretto utilizzare un contenitore più esterno (come hai provato a fare con i due <div>). Applicare quindi al contenitore esterno il colore di sfondo, mentre a quello interno applicare il bordo e il margine.

Potrebbe essere una cosa del genere:

<div class="title-container">
  <div class="title-wrap">
    <img class="img-wrap" src="./xampp_pics/favicon.png" alt="Logo XAMPP">
    <h1><strong>XAMPP</strong> Apache + MariaDB + PHP + Perl</h1>
  </div>
</div>

.title-container {
  display: flex;
  background-color: #efeee6;
}

.title-wrap {
  display: inline-flex;
  align-items: center;
  margin: 20px auto 60px;
  padding: 10px;
  border-block: 2px solid #989898;
}


.img-wrap {
  margin-right: 15px;
}


.title-wrap h1 {
  margin: 0;
  font-size: 2.6em;
  font-weight: normal;
  color: red;
}

Chiaramente la questione si può risolvere in mille altri modi, magari da valutare meglio anche a seconda del contesto e di eventuali altri fattori che potrebbero influenzarne il risultato stesso.

[samiel]

Andiamo per ordine
...
Chiaramente la questione si può risolvere in mille altri modi, magari da valutare meglio anche a seconda del contesto e di eventuali altri fattori che potrebbero influenzarne il risultato stesso.

Grazie mille, sembra perfetto - tranne una cosa: io vorrei allineare gli elementi a sinistra (non al centro).
Premettendo che è la prima volta che uso flex (il mio PHP / HTML risale a qualche anno fa), ho provato diverse soluzioni trovate in rete (justify-content:flex-start oppure align-items:center, ma nessuna sembra funzionare

m

[KillerWorm]

Intendi dire che vuoi allineare a sinistra l'intero contenitore interno (.title-wrap)?

In tal caso prova ad impostare un valore fisso per i margini laterali di tale elemento (sostituendo quindi quel valore auto che di fatto allinea l'elemento al centro dello spazio disponibile), ad esempio:

margin: 20px 20px 60px;

Considera che questa sintassi, scritta in questo modo, è una forma compatta in cui il primo valore si riferisce al margine superiore (margin-top), il secondo ai margini laterali (margin-right e margin-left) e il terzo al margine inferiore (margin-bottom).

Giusto per chiarezza, può essere scritto come forma estesa applicando i valori alle singole sotto-proprietà, in questo modo:

margin-top: 20px;
margin-right: 20px;
margin-bottom: 60px;
margin-left: 20px;

[samiel]

PS
Il rendering è diverso e appare scorretto in Firefox (o almeno nella versione 140ESR disponibile in Debian Testing):

CHROME:


FIREFOX:

m

PS
Non riesco più a caricare le immagini!

[KillerWorm]

Il rendering è diverso e appare scorretto in Firefox (o almeno nella versione 140ESR disponibile in Debian Testing):

Ho testato su FF 145.0.1 (appena aggiornato) e CH 142.0.7444.163 con win10, non noto problemi o differenze sostanziali.

Testato online, qui il Pen di riscontro: https://codepen.io/OpenDec/pen/raxGJLq

Non ho possibilità di testarlo in altro modo.

Verifica comunque che non ci siano eventuali errori di sintassi sul tuo elaborato CSS e HTML, per i quali ciascun browser potrebbe correggere a proprio modo e produrre eventuali risultati differenti.

Non riesco più a caricare le immagini!

Problemi di ruggine stratificata della piattaforma.
Riprova, magari sarai più fortunato