?
Solved

HTML CSS

Posted on 2016-11-28
7
Medium Priority
?
56 Views
Last Modified: 2016-11-28
In a html code, <nav> (left menu) is followed by <section>. Will margin of section is calcuated based on the left most of the page, or based on the nav ?

Is nav a inline or block element ?

Thx

nav {
    float: left;
    width: 200px;
    border: 3px solid #73AD21;
}

section {
    margin-left: 206px;
    border: 3px solid red;
}
0
Comment
Question by:AXISHK
  • 3
  • 2
  • 2
7 Comments
 
LVL 19

Expert Comment

by:Montoya
ID: 41905112
your nav and your section tags are separate elements.

the nav tag, by its nature, displays inline

The section does not, unless you tell it to do so. Your margins as they are displayed, are looking at the page.

If the section tag was part of the nav tag..

<nav>

     <section> my section <section>
</nav>

then the margins would be relative to the parent container.. unless you change them.

Hope that helps.
0
 

Author Comment

by:AXISHK
ID: 41905125
In case the code appear as

<nav> ... </nav>
<section> .... </section>

Then, how does the margion of <section> base on ?

Thx
0
 
LVL 19

Expert Comment

by:Montoya
ID: 41905147
It is very useful to understand the box model https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Another to look at it, is a shoebox.

a container div, is a shoe box. Everything inside it is contained by default inside that box. (being that its the web, you can break that rule, but we're talking defaults).

So if my shoe box is 20px from the edge of the screen, then the items inside it will start at the distance of the shoebox. Therefore, if my <section> inside my shoebox has a 5 px margin, it will be 25 pixels from the edge of the screen... and so on.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 

Author Comment

by:AXISHK
ID: 41905200
To clarify my understanding

<div>
  <nav> .... </nav>
 <section> ... </section>
</div>

<nav> is configured as float. So margin of <section> will be calcuated based on <div>, not <nav> even though <nav> is followed by <section> ?

Thx
0
 
LVL 62

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41905239
The margin is relative to its parent. Your nav is floated left and the section has sufficient left margin to be able to accommodate the <nav> so these two elements will be side by side.
The gap between the will depend on the box-sizing style specified for each. For instance

box-sizing: border-box

On the elements will mean the border 3px is drawn inside the element as part of its width.

If it is not specified then the border is outside the element and is added to the width.

This results either in the containers being right next to each other or having a 6px gap.

To answer your question the margin of the <section> is dependent on the <section>'s container - not the <nav>
0
 

Author Closing Comment

by:AXISHK
ID: 41905242
Thx
0
 
LVL 62

Expert Comment

by:Julian Hansen
ID: 41905283
You are welcome.
0

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

584 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question