Solved

HTML CSS

Posted on 2016-11-28
7
20 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:Iammontoya
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:Iammontoya
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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 51

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 51

Expert Comment

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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now