Why is there no space between form-inline 's elements? - css

Question

Demo: http://jsfiddle.net/sunnycpp/MPACc/4/
Same code copy-pasted here:
HTML
<div class="container">
<debug-bar ng-controller="parentController">
<debug-bar ng-controller="childController">
<debug-bar ng-controller="oneMoreChildController"></debug-bar>
</debug-bar>
<debug-bar ng-controller="oneMoreChildController"></debug-bar>
</debug-bar>
</div>
Javascript
var angModule = angular.module('components', []);
angModule.directive('debugBar', function () {
return {
restrict: 'E',
template:
'<div>'+
'<form class="form-inline">' +
'<input type="text" class="input-small" ng-model="myText"/>' +
'<button class="btn btn-primary">Broadcast</button>' +
'<button class="btn btn-primary">Emit</button>' +
'</form>' +
'<div ng-transclude></div>'+
'</div>',
transclude: true,
replace: true
};
});
function createController(myText) {
return function ($scope) {
$scope.myText = myText;
$scope.$on("event", function (senderText) {
console.log("Event received in:" + $scope.myText + " from Sender:" + senderText);
});
$scope.$broadCastEvent = function () {
$scope.$broadcast("event", $scope.myText);
console.log("Sent event from:" + $scope.myText);
};
};
}
angModule.controller("parentController", createController("In parent"));
angModule.controller("childController", createController("in FirstChild"));
angModule.controller("oneMoreChildController", createController("in oneMoreChildController"));
angModule.controller("oneMoreChildController", createController("in secondLevelChild"));

Answer 1

Because you didn't define any. :p jsfiddle and bootstrap reset the margins and you don't define any...
Defining some margins fixes the problems immediately
input,button{
margin:0 5px;
}
Example