+ <p >Chaque élément de la page HTML possède une <em>boîte
+ rectangulaire</em> qui délimite le contenu de l'élément:
+ </p>
+ <div style="text-align:center;vertical-align:text-bottom;">
+ <span class="b0" style="color:black;">← <span style="padding:0 24vh 0
+ 25vh;"> width </span><span style="padding-right:10vh">→</span><br/>
+ <span id="b1" style="display:inline-block;
+ color:black;
+ padding:0 4vh 4vh 4vh;
+ border:dotted 2pt black;"><i>margin</i> (marge)<br/>
+ <span id="b2" style="display:inline-block;
+ padding:0 4vh 4vh 4vh;
+ color:white;background:black">
+ <i>border</i> (bordure)<br/>
+ <span id="b3" style="display:inline-block;padding:0 3vh 3vh 3vh;
+ background:white;color:black;border:dotted
+ 2pt black">
+ <i>padding</i> (ajustement)<br/>
+ <span style="border:dotted 2pt black;
+ background:white;
+ position:relative;
+ display:inline-block;
+ font-size:15vh;
+ width:2.8em;
+ height:12vh;">
+ <span style="color:red;
+ top:-5vh;
+ left:0vh;
+ position:absolute;
+ text-decoration:underline;
+ padding:0 0 0 0;
+ margin: 0 0 0 0;
+ ">Lien 1
+ </span>
+ </span>
+ </span>
+ </span>
+ </span>
+ </span><span class="b0" style="color:black;vertical-align:top;display:inline-block;font-size:large;height:100%;">↑<br/><br/><br/><br/>
+ height<br/><br/><br/><br/>↓
+ </span>
+ </div>
+ <script type="text/javascript">
+ function all(e) {
+ return $(e).children("*").addBack()
+ }
+ function hide(e) {
+ all(e).css('visibility', 'hidden');
+ };
+ function show(e) {
+ all(e).css('visibility', 'visible');
+ }
+ SWS.Presentation.registerCallback("0", function(c) {
+ hide(".b0");hide("#b1"); hide("#b2"); hide("#b3");
+
+ });
+ SWS.Presentation.registerCallback("1", function(c) {
+ hide(".b0");hide("#b1"); hide("#b2"); show("#b3");
+ });
+ SWS.Presentation.registerCallback("2", function(c) {
+ hide(".b0");hide("#b1"); show("#b2"); show("#b3");
+ });
+ SWS.Presentation.registerCallback("3", function(c) {
+ hide(".b0");show("#b1"); show("#b2"); show("#b3");
+ });
+ SWS.Presentation.registerCallback("4", function(c) {
+ show(".b0");show("#b1"); show("#b2"); show("#b3");
+ });
+ </script>
+ <p class="sws-onframe-5">La <em>taille t du contenu</em> est calculée pour que:<br/>
+ <tt>(height|width) = padding + margin + border + t</tt>
+ </p>