CODEWITHSUNDEEP
angulartypescript
Abhijeet Khangarot
Abhijeet Khangarot

Reputation: 1567

Remove padding from components in angular2

How to remove the padding added to new components in angular2. For example : enter image description here

Here the above is a header of my project but the padding is added automatically. I have tried changing padding to 0 in styles.css outside app folder : 

/* You can add global styles to this file, and also import other style files */
body {
     margin: 0;
     padding: 0;
}

My appcomponent.html looks like this: 

<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

I have also tried to add padding 0 to headercomponent.css:

.body {
    background-color: pink;
    padding-top: 0px;
}

Headercomponent.html is : 

<div class="body">
<h1 class="text-center">
Crypcheck
</h1>

<p class="text-center">
Check prices of your favourite cryptocurrencies!
</p>

</div>

Thanks for reading.

Upvotes: 1

Views: 6469

Answers (3)

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

I would like to add an answer that might be helpful who put white-space: pre-line; in body style, then it will take some extra space at top of the body. Remove it or make normal body properties of css.

body {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 16px;
    color: #444;
    position: relative;
    z-index: 14;
    white-space: normal;
}

Upvotes: 0

yovchokalev
yovchokalev

Reputation: 641

Try

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

Upvotes: 4

Sean
Sean

Reputation: 1289

If you inspect the element with the Chrome DevTools or the equivalent in your browser you'll be able to see the styles that are applied and where they are coming from. Right click on your Component and select Inspect.

As an example in the screenshot below, you can see how the margin in tools.css is overriding the default styles from the browser (user agent stylesheet).

If you change the selected element, you'll be able to figure out where that whitespace is coming from.

Source: Inspect and Edit Pages and Styles

enter image description here

Upvotes: 2

Related Questions