Skip to content

Instantly share code, notes, and snippets.

@teffcode

teffcode/css-quiz-inline-width.md

Created June 29, 2020 05:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save teffcode/dbec26ddcde888b78f80a3002750294b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save teffcode/dbec26ddcde888b78f80a3002750294b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. teffcode created this gist Jun 29, 2020.
    100 changes: 100 additions & 0 deletions css-quiz-inline-width.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,100 @@
    <h1 align="center">馃憢馃徏 Welcome 馃憢馃徏</h1>

    ![Quiz banner](https://i.imgur.com/9Q8OQae.png)

    <p align="center">
    <a href="https://www.instagram.com/teffcode/">Instagram</a> |
    <a href="https://twitter.com/teffcode">Twitter</a> |
    <a href="https://www.linkedin.com/in/teffcode/">LinkedIn</a>
    </p>

    <br/>

    <h2>Choose your language 馃憛 </h2>

    <br/>

    * [English](#english-version)
    * [Spanish](#spanish-version)

    <br/>

    <h2>English version 馃殌 </h2>

    <br/>

    Consider the following code:

    | CSS | HTML |
    :---:|:---:|
    ![](https://i.imgur.com/esP7Mjm.png) | ![](https://i.imgur.com/2rMVqpZ.png)

    <br/>

    What would you see in the browser ?

    <br/>

    <kbd>
    <img width="700" src="https://i.imgur.com/GJMYzGu.png" >
    </kbd>

    <br/>
    <br/>

    <details>
    <summary>Click here to see the correct answer and explanation 馃憖</summary>

    <br/>

    Correct Answer | Explanation |
    :---: | --- |
    A 馃帀 | The [W3C鈥檚](https://www.w3.org/TR/CSS2/visudet.html#q4) CSS2 spec states that for Inline, the `width` property does not apply. |

    <br/>

    > *Recommended reading* 馃憠馃徏 [Inline elements and padding](https://maxdesign.com.au/articles/inline/)
    </details>

    <br/>
    <br/>

    <h2>Spanish version 馃殌 </h2>

    <br/>

    Considera el siguiente c贸digo:

    | CSS | HTML |
    :---:|:---:|
    ![](https://i.imgur.com/esP7Mjm.png) | ![](https://i.imgur.com/2rMVqpZ.png)

    <br/>

    驴 Qu茅 ver铆as en el navegador ?

    <br/>

    <kbd>
    <img width="700" src="https://i.imgur.com/GJMYzGu.png" >
    </kbd>

    <br/>
    <br/>

    <details>
    <summary>Haz click aqu铆 para ver la respuesta correcta y su explicaci贸n 馃憖</summary>

    <br/>

    Respuesta correcta | Explicaci贸n |
    :---: | --- |
    A 馃帀 | La especificaci贸n CSS2 del [W3C](https://www.w3.org/TR/CSS2/visudet.html#q4) establece que para los elementos en l铆nea, la propiedad `width` no se aplica. |

    <br/>

    > *Lectura recomendada* 馃憠馃徏 [Inline elements and padding](https://maxdesign.com.au/articles/inline/)
    <br/>
    <br/>