Aman Agrawal, Author at Codeexecute | Page 2 of 4

image (img) element is not taking margin-top or bottom..

While designing one of my page I encountered with an interesting issue with which I juggled a lot.I was trying to align the image element as per design but the image element was not taking any margin at all in top or bottom but in horizontal direction only.

So as per specification I have discovered the basic behind the inline and block element.The image element is inline by default. All the inline elements take margin only in horizontal direction but that would not be reflected in vertical direction. This elements will continue the flow without breaking the flow.

Hence in below example:-


<style>
.custom-span{
margin:20px;
border:2px #000 solid;
background-color:#d5cbcb;
}
</style>

The span element in this line will be separated horizontally on 
defining the margin but the vertical alignment of the span will be same. <span class="custom-span">span element</span>
Margin example in inline element :-

The span element in this line will be separated horizontally on defining the margin but the vertical alignment of the span remains same. span element

More about the inline and block properties,click here

 

display:Inline vs display:block

Normally HTML elements are rendered as box elements according to HTML specification. But the element could be shown in different manner. If not specified all the HTML elements inherit the default display property according to their behaviors. These default and basic properties are:-
1.inline
2.block
3.none

display:none, property implies that element and its children elements will not be rendered at all and would not be displayed on the page.

But rest of the elements are either inline or block ,so we will learn about the difference between inline vs block

A block element-
– Uses full width of available space
– starts always in next line
– margin and width defined on these elements will be reflected on page

Common Block elements :-

<h1> to <h6> , <p>,<div>, <table>,<form>,<pre>,<block>,<blockquote>

An inline element

– do not break the flow, it starts in the continuity of the existing element
– does not use complete space
– the margin and padding would be reflected only in horizontal direction not in vertical direction

Common inline elements :-

<ul>,<li>,<a>,<span>,<strong>,<em>

Example for (display:block) elements :-

<style>
div{
border:2px soild #000;
background-color:#ccc;
}
</style>
<div id="div1">
This div is using complete space.

</div>

<div  id="div2">
div2 is using complete space  and starts in second line after first div

</div>
This div is using complete space.

div2 is using complete space and starts in second line after first div

Example for (display:block) elements:-

<p>The span element won't start in next line<em>inline span element</em></p>

The span element won’t start in next line inline span element

Common Problems related to this section:-
1. Why image (img) element is not taking margin-top or bottom..

 

Difference between Blur and spread in Box -shadow

Box-Shadow property in css is for defining the shadow of any div or block element.
A quick look of all attributes assigned to the box-shadow property:-

Box-shadow: offset-x | offset-y | blur-radius | spread-radius | color | inset;

Value Description Requierd/Optional
offset-x The horizontal displacement of the shadow from the div or block Requierd
offset-y The vertical displacement of the shadow from the div or block. Requierd
blur-radius The blur effect on shadow Optional ,Default value is 0
spread-radius Size of the shadow,Positive values to grow,negative values to shrink Optional ,Default value is 0
inset If inset keyword is specified then the shadow will be within border optional, Default shadow is assumed to be a drop shadow

Hence the blur radius (optional) is for blurring the shadow , for 0 value the shadow will be sharp, while the spread radius (optional) increase the size of the shadow and if negative then decreases the size of shadow.

If spread radius is 0 ,i.e. no size has been defined for shadow then the shadow will be same size as that of blur radius.

box-shadow:2px 2px #000;

No Spread , No Blur

box-shadow:2px 2px 3px #000;

No Spread , Only Blur

box-shadow:2px 2px 0px 3px #000;

Only Spread , 0 Blur

box-shadow:2px 2px 3px 3px #000;

No Spread , Only Blur

box-shadow:2px 2px 3px 3px #000;

Spread & Blur

box-shadow:2px 2px 3px -3px #000;

Negative Spread

box-shadow:0px 0px 3px 3px #000;

Spread and Blur with homogeneous shadow

box-shadow:0px 0px 3px 3px #000 inset ;

Inset shadow

 

Bootstrap contextual classes

The bootstrap is all about defined classes,that we can use in our HTML template to beautify it without much hard work.So here in this series we will discuss about Bootstrap contextual classes.The contextual classes are the classes defined by bootstrap design team to indicate about some context.

Bootstrap contextual classes :-

  • .success >> Indicates a successful or positive action
  • .info >> Indicates a neutral informative change or action
  • .warning >> Indicates a warning that might need attention
  • .danger >> Indicates a dangerous or potentially negative action

These contextual classes can be used throughout the HTML template with many HTML elements.

For example in button elements :-


<button type="button" class="btn btn-success">Success</button> <br>
<button type="button" class="btn btn-info">Info</button> <br>
<button type="button" class="btn btn-warning">Warning</button> <br>
<button type="button" class="btn btn-danger">Danger</button> <br>

For Table elements:


<table class="table">


<tr class="success">
<td>Sucess Class</td>
</tr>

 

<tr class="info">
<td>info Class</td>
</tr>

 

<tr class="warning">
<td>warningClass</td>
</tr>

 

<tr class="danger">
<td>dangerClass</td>
</tr>

 
 </table>

Sucess Class
info Class
warningClass
dangerClass

Or even in background color:-


<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

 

How to add the page loader in angularJS??

To add the page loader , we need to determine the http request sent by us has been responded or not.

For this simple query we need to evaluate just the value of following expression.

$http.pendingRequests.length.

Following directive can be used anywhere to install loader the page on loading:-

Example:-

angular.module('myApp.loading',[])

   .directive('loading',   ['$http' ,function ($http)
    {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading, function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

In View Page :-

Where spinner is the class you want to add as animation or loading image.

More about
Http Request