Understanding what element has what border

#1

Hi all,
I’m really trying to nail down my understanding of exactly how css displays elements and the space they take up. I have found learning to turn borders on very very helpful to see the exact space boxes take up, but what this doesn’t tell me is the margin of particular elements. Is there a way to display a box not only around the box itself but the margins contained within the element?
I have also found this strange occurrence when turning on borders on particular elements. In the example below I have a border around the work experience section and there are clear margins between the header section above and education section below:


/* Header & Footer 
------------------------------------*/
header, footer {
	background: #4C2A85;
}

/* Work Experience
------------------------------------*/
.work {
	background: #6B7FD7;
	border:red solid 1px;
}

/* Education
------------------------------------*/
.education { 
	background: #DDFBD2;
}

22
221678×891 103 KB

When I add borders to either the footer/header or to the education section, it seems to join the two sections together with the borders and I’m having a hard time trying to understand why this happens (see example below with border turned on for header/footer). Does anyone know why this happens and what exactly it is doing?

/* Header & Footer 
------------------------------------*/
header, footer {
	background: #4C2A85;
	border:red solid 1px;
}

/* Work Experience
------------------------------------*/
.work {
	background: #6B7FD7;
	border:red solid 1px;
}

/* Education
------------------------------------*/
.education { 
	background: #DDFBD2;
}

01
011680×874 107 KB

Thanks in advance.

#2

The CSS margins refer to space around elements not including any defined borders.

I do not see where your defined margins for any of these elements/classes. Also, I do not know what html you are using for these examples. If you post all the html and css, I could better explain how the space “disappears” in the 2nd example.

#3

I haven’t defined any margins. Should I always start by doing this rather than just using the browser presets?

Below is the entire html and css:

(ps, I don’t know what time it is in the US, but given the time here in the UK I’m assuming it’s like the middle of the night there. Impressed to be getting help at this hour…! Thanks)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Christina Truong | Resume</title>
    <link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
    <!-- // Intro -->
    <header>
        <img src="images/christina-truong.png" alt="Christina Truong">
        <h1>Christina Truong</h1>
        <h2>Web Developer + Educator</h2>
        <p>As a developer, I specialize in creating modular and scalable front-end architectures. As an educator, I focus on creating inclusive learning environments, instructor training and curriculum development. I'm also a certified <a href="https://www.lesmills.com/workouts/fitness-classes/bodypump/" target="_blank">BODYPUMP</a> Instructor for GoodLife Fitness!</p>
    </header>
    
    <main> 
        <!-- // Work Experience -->
        <section class="work">
            <h2>Work Experience</h2>

            <!-- Job 1 Details -->
            <h3>Independent Front-end Developer & Educator</h3>
            <p>Independent / Freelance</p>
            <p>January 2012 - Present</p>
            
            <p>Provides various front-end related services ranging from development work, consultations, speaking engagements, corporate training, workshops and online courses.</p>
            <p>See more at <a href="http://christinatruong.com" target="_blank">christinatruong.com</a>.</p>
            
            <!-- Job 2 Details -->
            <h3>Director of Curriculum</h3>
            <p>Ladies Learning Code</p>
            <p>July 2014 - February 2016</p>
            
            <p>Created and managed all adult focused curriculum, instructor training and tech related strategies and duties.</p>
            <p>Key contributions:</p>
            <ul>
                <li>Created 9 new workshops focusing on HTML, CSS, JavaScript, jQuery, Wordpress and Responsive Web Design.</li>
                <li>Created all Hackapalooza content (2 day conference style event), consisting of 2-4 hour workshop sessions focused on front-end coding languages and web development related topics.</li>
                <li>Lead instructor and created curriculum for the Digital Skills part-time program.</li>
                <li>Provided training for all instructors, in all Canadian chapters, focusing on creating an inclusive and engaging learning environment.</li>
                <li>Maintained the ladieslearningcode.com website.</li>
                <li>Created interactive slide deck template for consistent national workshop branding.</li>
                <li>Volunteer lead instructor from 2011-2014 for Toronto workshops and several chapter launches.</li>
            </ul>
            
            <!-- Job 3 Details -->
            <h3>Lead Front-End Developer</h3>
            <p>Field ID</p>
            <p>March 2013 - February 2014</p>
            
            <p>Lead the front-end development for in-house safety inspection software.</p>
            <p>Key contributions:</p>
            <ul>
                <li>Responsible for recommendations, setting code standards for the front-end development.</li>
                <li>Created a fully customized front-end framework, including UI/UX.</li>
                <li>Standardized the site architecture and design. The framework contains reusable components and extensible classes for customization and flexibility.</li>
            </ul>
            
            <p>See my complete work history on <a href="https://www.linkedin.com/in/christinatruong/" target="_blank">LinkedIn</a>.</p>
        </section>


        <!-- // Education -->
        <section class="education">
            <h2>Education</h2>

            <!-- School 1 details. -->
            <h3>Seneca College - Toronto, ON</h3>
            <p>Webmaster Content Site Design Certificate, 2006</p>
            <p>14 week full-time program.</p>
            
            <!-- School 2 details. -->
            <h3>York University - Toronto, ON</h3>
            <p>Bachelor of Arts, 2001-2005</p>
            <p>Double Major in Communications & Psychology.</p>
            
            <!-- School 3 details. -->
            <h3>San Jose State University - San Jose, CA</h3>
            <p>General Studies, 2000</p>
            <p>First year general studies.</p>
        </section>
    </main>
    
    <!-- // Footer & contact info -->
    <footer>
        <h2>Let's Keep in Touch!</h2>
        
        <!-- Social media links. Add or remove any networks. -->
        <div>
            <a href="mailto:email@example.com">email@example.com</a>
            <a href="http://christinatruong.com">christinatruong.com</a>
            <a href="https://twitter.com/christinatruong">Twitter</a>
            <a href="https://www.linkedin.com/in/christinatruong/">LinkedIn</a>
            <a href="http://fb.me/christinacodes">Facebook</a>
        </div>

        <p>Copyright 2017 by Christina Truong</p>
    </footer>
</body>
</html>

CSS

/* Color Palette
#320E3B - dark purple
#4C2A85 - spanish violet
#6B7FD7 - little boy blue
#BCEDF6 - diamond
#DDFBD2 - nyanza
#E1F1F4 - azureish white
*/

/* Global styles 
------------------------------------*/
body {
	background: #E1F1F4
}

a {
	color: #6B7FD7;
	text-decoration: none;
	text-transform: lowercase; 
}

a:hover {
	text-decoration: underline;
}


/* Header & Footer 
------------------------------------*/
header, footer {
	background: #4C2A85;
	color: #E1F1F4;
}

/* Work Experience
------------------------------------*/
.work {
	background: #6B7FD7;
	margin-top: -19px;
}

/* Education
------------------------------------*/
.education { 
	background: #DDFBD2;
	margin-top: -17px;
}
#4

I did just add some negative margins into the code btw to see if this would close the gap between the sections.

#5

The h2 and p elements have a default margin values, which are causing the space.

See w3schools Default CSS Values for HTML Elements for more information.

1 Like
#6