Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML CSS

Posted on 2016-11-28
7
Medium Priority
?
50 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 59

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 59

Expert Comment

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

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…

722 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