2023-09-23

this time i'm gonna
experiment some more with
boxes
while practicing
things i already
know, such as:

fonts and colours

lists

hyperlinks

hm. it's strange that last time i made boxes, they stretched to accomodate
text, but this time, it didn't. i wonder if it's because i defined dimensions
for the text. let me see if that's the case:

woah. this isn't what i thought would happen.

i learned something just now though!

when i defined the length and width for the first div, i also defined where
the next div would start. that's why there was overlap!

now i want to figure out how to do it on purpose. i originally wanted to learn how to use images as backgrounds in this post,
but it's good that i ran into this problem so i can deepen my understanding of
html and how it works.

woaahh!!! i did it! so basically what i did was i made the div above this one 15px tall, and then i typed a lot to make the text taller than 15 pixels.

this just looks like a big disaster, but it was very educational for me. in the next post, i'll try to make boxes with images as the backgrounds.

<!DOCTYPE html>

<html>

<body>

this time i'm gonna

<span style="font-family:georgia;color:gray">experiment some more with </span>

<span style="font=family:garamond;color:brown">boxes </span>

<span style="font-family:arial;color:red">while practicing </span>

<span style="font-family:verdana;color:orange">things i already </span>

</p>

<li style="font-family:courier new;color:green">fonts and colours</li>

<li style="font-family:lucida console;color:blue">lists</li>

<li style="font-family:monaco; color:purple"><a href=https://www.dreamwidth.org/circle/svnsettia/edit?action=subscribe target=_blank>hyperlinks</a></li>

</ul>

<span style="font-family:lucida handwriting;color:pink">hm. it's strange that last time i made boxes, they stretched to accomodate </span>

<span style="font-family:arial; color:orange">text, but this time, it didn't. i wonder if it's because i defined dimensions</span>

for the text. let me see if that's the case:</p>

</div>

<p>woah. this isn't what i thought would happen.</p>

</div>

<p>i learned something just now though!</p>

<div>

<p style="font-size:9px;font-family:helvetica">;when i defined the length and width for the first <div>, i also defined where
the next div would start. that's why there was overlap!</</p>

</div>

<p style="font-size:10px">now i want to figure out how to do it on purpose. i originally wanted to learn how to use images as backgrounds in this post,

but it's good that i ran into this problem so i can deepen my understanding of

html and how it works.</p>

</div>

<div>

<p style="font-family:arial;font-size:13px;color:#d4afeb">woaahh!!! i did it! so basically what i did was i made the div above this one 15px tall, and then i typed a lot to make the text taller than 15 pixels. </p>

</div>

<div>in the next post, i'll try to make boxes with images as the backgrounds.</div>

</body>

</html>

2023-09-23

⤿ html vertical overlap