Wisst ihr vielleicht wieso mein Bild und der Text nicht zentral in der Box ist, sondern es oben so einen großen Abstand gibt?
Das ist der Code dazu:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 550px;
height: 50px;
padding: 40px;
}
.box:nth-of-type(1) {
border: 4px solid green;
}
.box:nth-of-type(2) {
border: 4px solid green;
}
</style>
</head>
<body>
<p>
<div class="box">
<p><img src="hund.png" alt="hahn" width="60"
height="60" style="float:left; margin-left: 20px;"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
</div>
</p >
<p>
<div class="box">
<p><img src="hahn.png" alt="hahn" width="60"
height="60" style="float:right; margin-left: 20px;"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
</div>
</p>
</body>
</html>
Das ist der Code dazu:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 550px;
height: 50px;
padding: 40px;
}
.box:nth-of-type(1) {
border: 4px solid green;
}
.box:nth-of-type(2) {
border: 4px solid green;
}
</style>
</head>
<body>
<p>
<div class="box">
<p><img src="hund.png" alt="hahn" width="60"
height="60" style="float:left; margin-left: 20px;"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
</div>
</p >
<p>
<div class="box">
<p><img src="hahn.png" alt="hahn" width="60"
height="60" style="float:right; margin-left: 20px;"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
</div>
</p>
</body>
</html>
