, как избавиться от лишнего пространства в изображении заголовка

html, body { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.nav { 
 
    margin:0px; 
 
} 
 

 
.navbar{ 
 
    margin-bottom:0px; 
 
} 
 

 
.header{ 
 
    margin:0px; 
 
    padding:0px; 
 
    display:block; 
 
    vertical-align:middle; 
 
    width:100%; 
 
}

<! doctype html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
 
    <!-- Custom CSS --> 
 
    <link href="css.css" rel="stylesheet" type='text/css'> 
 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous"> 
 
    <!--font family--> 
 
    <link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> 
 
    <link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'> 
 
    </head> 
 
    <body > 
 
    <!--Navigation--> 
 
    <nav class="navbar navbar-inverse navbar-static-top"> 
 
     <div class="conatiner-fluid"> 
 
     <!--page scroll button for --> 
 
     <div class="navbar-header page-scroll"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> \t \t \t 
 
      </button> 
 
      <a class="navbar-brand page-scroll" href="#page-scroll">Website</a> 
 
     </div> \t <!--page scroll button--> 
 
     <div> 
 
      <div class="collapse navbar-collapse" id="#myNavbar"> 
 
      <ul class="nav navbar-nav navbar-right" id="#myNavbar"> 
 
       <li class="hidden"><a href="#page-top"></a></li> 
 
       <li class="page-scroll"><a href="#">Home</a></li> 
 
       <li class="page-scroll"><a href="#about">About</a></li> 
 
       <li class="page-scroll"><a href="#services">Services</a></li> 
 
       <li class="page-scroll"><a href="#contact">Contact</a></li> 
 
      </ul> 
 
      </div> <!--ul-li--> 
 
     </div> <!--navbar collapse--> 
 
     </div> <!--container-fluid--> 
 
    </nav> 
 
    <!--Navigation--> 
 
    <!--Header--> 
 
    <header > 
 
     <div class="container" > 
 
     <div class="row"> 
 
      <img src="work.jpg" class="img-responsive" > 
 
     </div> 
 
     </div> 
 
    </header> 
 
    <!--Header--> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

Я кодирования мой первый веб-сайт, есть некоторые нежелательные белое пространство вокруг изображения заголовка, который не исчезнет.

Я проверил все обычные решения, такие как маржа установки и padding:0;display: block и width:100%, но они, похоже, не работают.

Может кто-нибудь, пожалуйста, взгляните на код и сообщите мне, что я делаю неправильно?

источник

2016-03-16 Learner

Заменить

<div class="container"> to <div class="container-fluid">

и дать ваше изображение

width= 100%.

Что-то вроде:

<style> 
    .width_full { 
    width: 100%; 
    } 
</style> 

<div class="container-fluid"> 
    <div class="row"> 
    <img src="work.jpg" class="img-responsive width_full"> 
    </div> 
</div>

источник

2016-03-16 12:46:38 Razack2084

Большое спасибо! Это сработало для меня. – Learner

, как избавиться от лишнего пространства в изображении заголовка

ответ

Смежные вопросы