Solved

HTML CSS

Posted on 2016-11-28
7
42 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

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 54

Accepted Solution

by:
Julian Hansen earned 500 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 54

Expert Comment

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

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

776 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