Whan to use span or div? and more

1

Hi,

I saw this code:
.hex {
margin-top: 30px;
width: 104px;
height: 60px;
background-color: ;
border-color: ;
position: relative;
display: inline-block;
}

and he puted it in a span

than I saw this code in div:

.box {
width: 500px;
height: 500px;
border: 100px solid black;

1.What’s the diffrence, and when I use div and when span?
2.I saw diffrent codes to do the same thing, how do I choose the right one or the better one?
3.I’m trying to take codes for like how to create a menu and most of them, for my level, like lorem ipsum, I don’t understand squat…even after I look for the explantion for like what is “display”… And I get the genetal idea but the all code still jibrish. can anyone write some beginers tips for me?

2

A <span> is a generic inline element; it will normally be in a block of text, and is used to wrap something in the text you want to select, for example to change the colour of a specific bit of text so that it is different from the rest:

<p>I want to make <span style="color: red;">this</span> word red</p>

If you have something that isn’t a to fit for one of the existing set of inline elements (<strong>, <em>, <img>, <sup>, <sub> etc.), you use <span>

A <div> is a generic block element. If you have something that isn’t going ta fit for one of the existing set of elements (<p>, <ul>, <article>, <section> etc.), you use <div>.

You use it to separate out blocks of content on the page.

In the example you gave, it looks like he’s using .hex on <spans> inside text to display blocks of colour. He’s using .box to define the size of a <div> that could have any content inside it.

3

How do I can get the full list of the elements that aren’t fit to ‘div’ ?
So, let me see that I gut it,
If there even one element that doesn’t fit for div I’ll use span, right ?
And for most, everything that is text related, is block level elements=div
and all the rest, like img,objects, nav etc’ ?
Because, if it so, I why most of the coders, using, for example, image in div?

Also, maybe you could help me with something…
I took a snippet code for a navigation to learn and use, and I can’t move all of the menu to the left…
this is my code pen: https://codepen.io/nadav-himmelfarb/pen/rvOLez

Again, if you have time for checking it

4

No, not really.

Think like you’re writing an essay.

  1. You have the essay as a whole. You have chapters and/or sections. You have contents or index pages (ie lists of other pages). You have headers and paragraphs within the sections. You also have figures (titled images/graphs etc).
  2. Within the text of that essay, you may have some text that should be italic or bold or whatever.

1 is block level, 2 is inline. Things in1 are containers for text, images etc.