HTML / CSS Margin-top用于移动整个背景的文本？

时间：2016-02-05 01:06:33

标签： html css

我试图将某些文字从其容器的顶部向下移动，但它会将整个容器向下移动。

＆＃13;
＆＃13; 
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: 'Open Sans';
    background-color: lightgray;
}

a
{
    text-decoration: none;
    color: #fff;
}

div#header
{
    background-image: url("header_img.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 80%;
    height: 220px;
    margin: 0 auto;
    margin-top: 50;
    color: #fff;
    font-size: 22px;
}

div#header span
{   
    font-weight: 300;
}


div#header h3
{
    text-align: center;
    padding-top: 85px;
}
div#header h4
{
    text-align: center;
}


/*
#222222 - top nav
#F5F5F5 - sidebar background color
#FFF - sidebar link hover background color
#63B7E8 - sidebar nav link hover text color
#D8D8D8 - sidebar nav text color

50px top margin
50px bottom margin
*/


/* Navigation */

/* Nav Title */
.nav
{
    background-color: dimgray;
    width: 80%;
    height: 40px;
    margin: 0 auto;
}

/* Remove bullet points on list */
.nav ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: dimgray;
}

.nav ul li
{
    float: left;
}

.nav ul li a
{
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px; 16px;
    text-decoration: none;
}

.nav ul li a:hover
{
    color: #099;
    background-color: #fff;
}

.home-content
{
    width: 80%;
    height: 350px;
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
    font-size: 22px;
    background-color: #fff;
}

.home-content span
{
    font-weight: 300;
}

/* This is the Text I want to push down from the top of it's container.*/
.title
{
    margin-top: 15px;
}

/* I also tried this:

.home-content h3
{
  margin-top: 15px; 
}

 */
＆＃13; 
<html>
<head>
    <title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

    <div class="container">
        <div id="header">
            <h3>Sample<span> Text</span></h3>
            <h4>Sample. Text. Here.</h4>
        </div>
    </div>
    
    <div class="container">
        <!-- Navigation -->
        <div class="nav">
                <ul>
                    <li><a class="active" href="#">Home</a></li>
                    <li><a href="#">Menu1</a></li>
                    <li><a href="#">Menu2</a></li>
                    <li><a href="#">Menu3</a></li>
                </ul>
        </div>
        
        <div class="home-content">
            <div class="title">
            <h3>Default<span> Text</span></h3>
            </div>
        
        </div>
        
    </div>
    
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

任何提示只推文字的提示？我很感激。谢谢。我也尝试了填充，但它给了我相同的结果。

3 个答案:

答案 0 :(得分：0)

我能够在父容器上填充，并且没有孩子的边距。我不知道这是最好的方式。

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: 'Open Sans';
    background-color: lightgray;
}

a
{
    text-decoration: none;
    color: #fff;
}

div#header
{
    background-image: url("header_img.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 80%;
    height: 220px;
    margin: 0 auto;
    margin-top: 50;
    color: #fff;
    font-size: 22px;
}

div#header span
{   
    font-weight: 300;
}


div#header h3
{
    text-align: center;
    padding-top: 85px;
}
div#header h4
{
    text-align: center;
}


/*
#222222 - top nav
#F5F5F5 - sidebar background color
#FFF - sidebar link hover background color
#63B7E8 - sidebar nav link hover text color
#D8D8D8 - sidebar nav text color

50px top margin
50px bottom margin
*/


/* Navigation */

/* Nav Title */
.nav
{
    background-color: dimgray;
    width: 80%;
    height: 40px;
    margin: 0 auto;
}

/* Remove bullet points on list */
.nav ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: dimgray;
}

.nav ul li
{
    float: left;
}

.nav ul li a
{
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px; 16px;
    text-decoration: none;
}

.nav ul li a:hover
{
    color: #099;
    background-color: #fff;
}

.home-content
{
    width: 80%;
    height: 350px;
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
    font-size: 22px;
    background-color: #fff;
    
    padding-top: 15px;
}

.home-content span
{
    font-weight: 300;
}

/* This is the Text I want to push down from the top of it's container.*/
.title
{
    /*margin-top: 15px;*/
}

/* I also tried this:

.home-content h3
{
  margin-top: 15px; 
}
<div class="container">
        <div id="header">
            <h3>Sample<span> Text</span></h3>
            <h4>Sample. Text. Here.</h4>
        </div>
    </div>
    
    <div class="container">
        <!-- Navigation -->
        <div class="nav">
                <ul>
                    <li><a class="active" href="#">Home</a></li>
                    <li><a href="#">Menu1</a></li>
                    <li><a href="#">Menu2</a></li>
                    <li><a href="#">Menu3</a></li>
                </ul>
        </div>
        
        <div class="home-content">
            <div class="title">
            <h3>Default<span> Text</span></h3>
            </div>
        
        </div>
        
    </div>

答案 1 :(得分：0)

将.title的位置设为relative，并使用top属性代替margin-top。

像这样：

https://jsfiddle.net/kbgb0qvr/

答案 2 :(得分：0)

试试这个 - 

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Open Sans';
  background-color: lightgray;
}
a {
  text-decoration: none;
  color: #fff;
}
div#header {
  background-image: url("header_img.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 80%;
  height: 220px;
  margin: 0 auto;
  margin-top: 50;
  color: #fff;
  font-size: 22px;
}
div#header span {
  font-weight: 300;
}
div#header h3 {
  text-align: center;
  padding-top: 85px;
}
div#header h4 {
  text-align: center;
}
/*
#222222 - top nav
#F5F5F5 - sidebar background color
#FFF - sidebar link hover background color
#63B7E8 - sidebar nav link hover text color
#D8D8D8 - sidebar nav text color

50px top margin
50px bottom margin
*/

/* Navigation */

/* Nav Title */

.nav {
  background-color: dimgray;
  width: 80%;
  height: 40px;
  margin: 0 auto;
}
/* Remove bullet points on list */

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: dimgray;
}
.nav ul li {
  float: left;
}
.nav ul li a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px;
  16px;
  text-decoration: none;
}
.nav ul li a:hover {
  color: #099;
  background-color: #fff;
}
.home-content {
  width: 80%;
  height: 350px;
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
  font-size: 22px;
  background-color: #fff;
}
.home-content span {
  font-weight: 300;
}
/* This is the Text I want to push down from the top of it's container.*/

.title {
  position: relative;
  top: 15px;
}
/* I also tried this:

.home-content h3
{
  margin-top: 15px; 
}

 */
<body>

  <div class="container">
    <div id="header">
      <h3>Sample<span> Text</span></h3>
      <h4>Sample. Text. Here.</h4>
    </div>
  </div>

  <div class="container">
    <!-- Navigation -->
    <div class="nav">
      <ul>
        <li><a class="active" href="#">Home</a>
        </li>
        <li><a href="#">Menu1</a>
        </li>
        <li><a href="#">Menu2</a>
        </li>
        <li><a href="#">Menu3</a>
        </li>
      </ul>
    </div>

    <div class="home-content">
      <div class="title">
        <h3>Default<span> Text</span></h3>
      </div>

    </div>

  </div>

</body>

不要使用填充或边距，而是尝试使用position上的top和.title属性，就像上面代码段中所做的那样。

相关问题
最新问题