autoMargin - Druckversion

Code:
<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Getting the Width and Height of an Element</title>

    <style>

        body {

            font-family: Calibri;

            font-size: 18px;

            background: -moz-linear-gradient(94deg,#000 0,#000 20%,#000 40%,#0a000d 60%,#140018 84%,#340041 92%,#c0f 100%);

            background: -webkit-linear-gradient(94deg,#000 0,#000 20%,#000 40%,#0a000d 60%,#140018 84%,#340041 92%,#c0f 100%);

            background: linear-gradient(94deg,#000 0,#000 20%,#000 40%,#0a000d 60%,#140018 84%,#340041 92%,#c0f 100%);

            min-height: 100%;

            background-attachment: fixed;

        }

        body {

            color: #eee;

            background-color: #111;

            overflow: auto;

        }

                #passages {

                    max-width: 54em;

                    margin: 0 auto;

                }

                .passage {

            line-height: 1.75;

            text-align: left;

            -webkit-transition: opacity .4s ease-in;

            -o-transition: opacity .4s ease-in;

            transition: opacity .4s ease-in;

        }

                .speech{

                border:solid 2px #c0f;

                border-radius: 3px;

                padding:8px;

            }

            .avatar {

            display: block;

            padding: 1px;

            height: 84px;

            width: 84px;

            float: left;

            margin: 0 10px 0 0;

            border: 2px solid #c0f;

            border-radius: 3px;

            background-size: contain;

        }

        a {

            font-size: 129%;

        }

        .adriana .avatar {

            background-image: url(assets/img/avatars/you.png);

        }

        .narrator, .speech {

            box-shadow: 3px 3px 1px #c0f;

        }

        hr {

            display: block;

            height: 1px;

            border: none;

            border-top: 1px solid #eee;

            margin: 1em 0;

            padding: 0;

            margin-bottom: ;

        }

    </style>

</head>



<body>

    <div id="passages" aria-live="polite">

        <div id="passage-adrianasbedroom" data-passage="adrianasbedroom" class="passage">

            <div  class="speech adriana 0">

                <span id="marginBottom" class="avatar 0"></span>Adriana<hr>

                <span style="color: #ff3399">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a consectetur nisi. Mauris imperdiet luctus orci at dignissim. Integer quis porttitor odio, ac gravida lectus. Morbi bibendum aliquam orci. Curabitur ut ultricies turpis, sed dictum lorem. Morbi varius leo at orci sagittis, vel varius erat dignissim. Sed vitae ex non sem euismod.</span>

            </div><br>

            <div class="speech adriana 1">

                <span id="marginBottom" class="avatar 1"></span>Adriana<hr>

                <span style="color: #ff3399">Lorem ipsum dolor sit amet.</span>

            </div><br>

            <div class="speech adriana 2">

                <span id="marginBottom" class="avatar 2"></span>Adriana<hr>

                <span style="color: #ff3399">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet dui id tellus suscipit consectetur condimentum a sapien. Etiam.</span>

            </div><br>

            <div class="speech adriana 3">

                <span id="marginBottom" class="avatar 3"></span>Adriana<hr>

                <span style="color: #ff3399">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non ipsum varius enim porta iaculis sed eu ipsum. Mauris facilisis risus ac ligula aliquam efficitur. Vivamus tincidunt at quam a auctor. Morbi fermentum non orci in eleifend. Maecenas et sem at mauris tempor aliquet quis non metus. Quisque dictum gravida velit, id placerat tortor. Vivamus eu porta libero, lobortis vehicula mauris. Pellentesque ut tortor ornare, tincidunt augue vel, ornare diam. Pellentesque maximus justo molestie est viverra sagittis. Pellentesque augue erat, posuere sed mollis non, tempus ut purus. Duis at tortor non magna tincidunt dignissim. Morbi fermentum et purus sit amet.</span>

            </div>

        </div>

    </div>





        <script type="text/javascript">

            var speechAll = document.querySelectorAll(".speech");

            var avatar = document.querySelectorAll('.avatar');

            var arrSp = Array.from(speechAll);

            var arraySpHeight = [];

            var arrayAvHeight = [];

            var arrayMargin =[];

            //console.log (arraySpHeight);

            //console.log (arrayMargin);

            //console.log (avatar);

            //console.log (marginList + " nach for");

            //console.log (heightSp, marginList, avatar);

            //console.log (marginList + " nach if");

            arrSp.forEach(function (wert, index,){

                arraySpHeight[index] = wert.offsetHeight;



            });

            arraySpHeight.forEach(function (height, index, array, avatar){

                if (height > 121) {

                    var newheight = height - 20;

                    var marginHeight = newheight - 90;

                    arrayMargin[index] = marginHeight;

                    //avatar.innerHTML = "" +height;  

                }



            });

            avatar.forEach(function (wert, index, nodelist){

                //var arrayAvatar = document.querySelectorAll('.avatar');

                //console.log (index, array + " Index in forEach arrayAvatar");

                //console.log (wert + " Wert in forEach arrayAvatar");

                //wert.innerHTML = "Test";

                //console.log (nodelist + " NodeList in forEach arrayMargin");

                //avatar.style.cssText = marginbottom;

            });     

        </script>

    </body>

</html>