在第一個CSS多列頂部添加空白行

Question

我正在使用CSS列，但似乎有一個問題，即文本的開頭在頂部有一個額外的空間，從而使隨后的第二和第三列顯得比第一列高。

我以為我掌握了所有基本知識。 我確實已經嘗試過刪除h2的margin-bottom，但這似乎並沒有影響列。 因此，我將h2放入自己的div中，但這也沒有影響到它們。 奇怪的是，它在DreamWeaver中看起來還不錯，但不是在服務器上運行時。 它似乎在Safari，FireFox和Opera中做到了。 我沒有Chrome或IE。

這是該站點的鏈接，因此您可以查看它： www.jordanmiller.newbedesign.com/coast/academics.html

以下是與各列一起使用的CSS：

h2 {
    font-weight: 300;
    margin-bottom: -.5%;
    font-color: #003;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
div.text {
    margin: 2% auto;
    max-width: 900px;
}
div.texthead {
    margin: 0 auto;
}
div.col {
  -webkit-column-count: 3;
  -webkit-column-gap: 1%; /* Saf3, Chrome*/
  -moz-column-count: 3;   
  -moz-column-gap: 1%; /* FF3.5+ */
  column-count: 3;        
  column-gap: 1%; /* Opera 11+*/
  text-align: left;
}

以下是內容的HTML：

<div class="texthead">
<h2>Academics: Not Just Books</h2>
</div>

<div class="text">
<div class="col"><p>Coast Middle School is a community of active learners working in concert for the development of individual success and self-esteem. It employs a comprehensive curriculum that seeks to develop the whole child--intellectually, physically, spiritually, socially, aesthetically, and emotionally. Teachers and students in Coast Middle School hold themselves and each other to the highest expectations. The Middle School academically challenges its students in foreign language, math, social studies, language arts, and science, while at the same nurturing emotional and creative development through our acclaimed fine arts and athletic programs.</p>

<p>Coast Middle School is developmentally responsive to the needs of its students. The Middle School provides the students with teachers and specialized professionals who are readily available to offer the assistance students need in negotiating their lives, both in and out of school. As a complement to their academic classes, students discuss issues relevant to their lives through our comprehensive character education and guidance curriculum. The student-led vestry program allows the students to develop a sense of leadership and responsibility as they aid the chaplain in the development of chapel messages.</p>

<p>Coast Middle School seeks to conceptualize and promote the healthy growth of young adolescents as ethical citizens and increasingly competent, self-sufficient young people who are optimistic about the future. To achieve these goals the Middle School is structured on a team concept. Each grade level is split into two teams--blue and white, representing our school colors--consisting of four academic core classes. Coast Middle School believes academic success and personal growth increase markedly when young adolescents' affective needs are met. Therefore, all adults in the Middle School are advocates, advisors, and mentors for each student. Each team works together on service-learning activities and experiential learning opportunities.</p>

<p>Coast Middle School feels strongly that the most successful learning strategies are ones that involve each student personally. Therefore, we offer after-school tutorials so students can get personalized help with homework or as preparation for a test or quiz. Other after-school possibilities include intramurals, clubs, and an Extended Day Program, which runs until 6:00 p.m. Students are also encouraged to participate on school athletic teams. Students in both grades can participate in drama performances.</p>

<p>Coast Middle School is also actively invested in the impact media and digital activities have on our students’ lives. Students in both grades participate in a Digital Citizenship curriculum provided by Common Sense Media, which encourages them to be safe, responsible, and savvy citizens of the digital world.</p>

<p><strong>Seventh Grade:</strong> While enjoying a similar daily schedule in seventh grade, the students make a choice from four languages (Chinese, French, Latin, or Spanish) for daily study. Additionally they choose one elective (see course descriptions). The seventh grade takes a class trip to Washington, D.C. Each of the three sports seasons includes at least one no-cut sport.</p>

<p><strong>Eighth Grade:</strong> The daily class schedule includes civics, physical science, algebra or geometry, and English. Interdisciplinary activities include Mock Congress and a social issues research project. All classes emphasize critical and creative thinking. The focus of this grade is leadership training and service learning, as well as preparation to move successfully into the Upper School. The eighth grade travels to New York City in the spring.</p>

<p>Students in both grades have a morning fruit break and break for a brief recess to socialize and develop friendships that are vital in the development of a young adolescent. Band, chorus, and orchestra are offered in bith grades, along with visual and theater arts opportunities.</p>
</div>

Answer 1

我認為將此添加到您的CSS可以解決問題：

div.col p{
    margin-top:0px;
}