Question

我的代码段之间有边框。当我为我的部分添加边框时，我的边距消失了。任何人都可以解释为什么这样做以及如何阻止它这样做？之前/之后的图片和下面的代码。

提前致谢。

在：

HTML＆amp; CSS

＆＃13;

/* Color Palette
    #320E3B - dark purple
    #4C2A85 - spanish violet
    #6B7FD7 - little boy blue
    #BCEDF6 - diamond
    #DDFBD2 - nyanza
    #E1F1F4 - azureish white
    */


/* Global styles 
    ------------------------------------*/

body {
  background: #E1F1F4;
  font-family: 'Josefin Sans', sans-serif;
}

p {
  font-family: avenir;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -.2px;
}

a {
  color: #6B7FD7;
  text-decoration: none;
  text-transform: lowercase;
}

a:hover {
  text-decoration: underline;
}

.content-wrap {
  max-width: 960px;
  margin: 0 auto;
}


/* Header & Footer 
    ------------------------------------*/

header,
footer {
  background: #4C2A85;
  color: #E1F1F4;
}

header h1,
header h2 {
  color: #BCEDF6;
  font-weight: 550;
}

header h1 {
  font-size: 50px;
}

header h2 {
  font-size: 25px;
}


/* Work Experience
    ------------------------------------*/

.work {
  background: #6B7FD7;
}


/* Education
    ------------------------------------*/

.education {
  background: #DDFBD2;
}

＆＃13;

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Matt Wendzina | Resume</title>
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link rel="stylesheet" href="css/stylesheet.css">
</head>

<body>
  <!-- // Intro -->
  <header>
    <div class="content-wrap">
      <img src="images/_MG_0333-Edit.jpg" width=3 0% alt="Matt Wendzina">
      <h1>Matt Wendzina</h1>
      <h2>Educator + photographer + visual and creative designer + musician + trainee web developer</h2>
      <p> I am a creative person who loves to learn and pass on what I discover through teaching. I'm a fully qualified teacher- having taught at Primary/Secondary level, both in the UK &amp; US. I have in studied music and composition, trained in photography,
        worked in marketing and communications and am currently training in IT and web development.
      </p>
    </div>
  </header>

  <main>
    <!-- // Work Experience -->
    <section class="work">
      <div class="content-wrap">
        <h2>Work Experience</h2>

        <!-- Job 1 Details -->
        <h3>Web Officer </h3>
        <p>Warwick University</p>
        <p>Nov 2017-Jan 2018</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> Marketing, Recruitment and Education Consultant</h3>
        <p>Warwick University, Warwick in Africa</p>
        <p>August 2016- August 2017</p>

        <p> Warwick in Africa is a charity run by Warwick University that recruits and trains over 60 students yearly to deliver innovative maths &amp; English education in over 30 partner schools serving poor & deprived areas of Africa.</p>
        <p>Key contributions:</p>
        <ul>
          <li> Marketing &amp; Advertising- Developing social media platforms and executing advertising strategies to enhance WiA brand/presence nationally and globally.</li>
          <li> Video and visual productions- Producing and editing professional grade interview and promotional assets. </li>
          <li> E-learning desinger- Using VLE software to develop online course materials. </li>
          <li> Re-developing and delivering core teacher-training curriculum in collaboration with academic partners and education specialists.</li>
          <li> Event Management- Organising and delivering events ranging from small to medium sized audiences.</li>
          <li> Recruitment- Covering the full cycle from initial contact to securing a full cohort of outstanding applicants. </li>
          <li>Research analysis and report writing- Design, process, analyse data and write reports for management.</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>
      </div>
    </section>


    <!-- // Education -->
    <section class="education">
      <div class="content-wrap">
        <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>
    </div>
  </main>

  <!-- // Footer & contact info -->
  <footer>
    <div class="content-wrap">
      <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="#">Facebook</a>
      </div>

      <p>Copyright 2017 by Christina Truong</p>
    </div>

  </footer>
</body>

＆＃13;

在：

相同的HTML和CSS添加：

.content-wrap {
max-width: 960px;
margin: 0 auto;
border: solid black 1px;
}

添加边框时为什么边距会消失？

0 个答案: