2.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad88fee1348bd9aedf08825	Regolare il padding di un elemento	0	https://scrimba.com/c/cED8ZC2	301083	adjust-the-padding-of-an-element

--description--

Ora mettiamo da parte per un po' la nostra Cat Photo App e impariamo di più sugli stili in HTML.

Potresti averlo già notato, ma tutti gli elementi HTML sono essenzialmente piccoli rettangoli.

Tre importanti proprietà controllano lo spazio che circonda ogni elemento HTML: padding, border e margin.

Un elemento padding controlla la quantità di spazio tra il contenuto dell'elemento e il suo border.

Qui possiamo vedere che il riquadro blu e quello rosso sono annidati all'interno del riquadro giallo. Si noti che il riquadro rosso ha più padding di quello blu.

Quando aumenti il padding del riquadro blu, aumenterà la distanza (padding) tra il testo e il bordo attorno ad esso.

--instructions--

Cambia il padding del riquadro blu per farlo corrispondere a quello del riquadro rosso.

--hints--

La tua classe blue-box dovrebbe dare agli elementi 20px di padding.

assert($('.blue-box').css('padding-top') === '20px');

--seed--

--seed-contents--

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }

  .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 10px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

--solutions--

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }

  .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

2.4 KiB Raw Blame History