contao/core — pull request #6208 by tristanlins (2013-09-20 09:31:05+00:00)
Title: negative margins

Currently it is impossible to set negative image margins, because they are added as paddings insted of margins. But multiple times I need negative image margins, for example to move an image into another image.

Here is an example:
![image-margins](https://f.cloud.github.com/assets/343404/1179503/68596efc-21d6-11e3-895e-811db0298184.png)
The newspaper has a negative margin at the bottom to flow into the blue box.

I know negative margins would be possible by "margin before/after", but I also need this for left/right to "move" an image out of the container element.

With this modification the `Controller::generateMargin()` will look into the values and generate margins if the value is negative, even if paddings are requested.

I tested it with this script:
```php
0, 'right' => 0, 'bottom' => 0, 'left' => 0, 'unit' => 'px')) {
$marginsOrig = $margins;
while (count($sides)) {
$margins = $marginsOrig;

$side = array_shift($sides);

$margins[$side] = count($sides) + 1;
var_dump(\Contao\Controller::generateMargin($margins, 'padding'));
test($sides, $margins);

$margins[$side] = -count($sides) - 1;
var_dump(\Contao\Controller::generateMargin($margins, 'padding'));
test($sides, $margins);
}
}

test(array('top', 'right', 'left', 'bottom'));
```
This is the result:
```
string(16) "padding-top:4px;"
string(35) "padding-top:4px; padding-right:3px;"
string(53) "padding-top:4px; padding-right:3px; padding-left:2px;"
string(24) "padding:4px 3px 1px 2px;"
string(73) "padding-top:4px; padding-right:3px; margin-bottom:-1px; padding-left:2px;"
string(53) "padding-top:4px; padding-right:3px; margin-left:-2px;"
string(73) "padding-top:4px; padding-right:3px; padding-bottom:1px; margin-left:-2px;"
string(73) "padding-top:4px; padding-right:3px; margin-bottom:-1px; margin-left:-2px;"
string(55) "padding-top:4px; padding-right:3px; padding-bottom:1px;"
string(55) "padding-top:4px; padding-right:3px; margin-bottom:-1px;"
string(35) "padding-top:4px; margin-right:-3px;"
string(53) "padding-top:4px; margin-right:-3px; padding-left:2px;"
string(73) "padding-top:4px; margin-right:-3px; padding-bottom:1px; padding-left:2px;"
string(73) "padding-top:4px; margin-right:-3px; margin-bottom:-1px; padding-left:2px;"
string(53) "padding-top:4px; margin-right:-3px; margin-left:-2px;"
string(73) "padding-top:4px; margin-right:-3px; padding-bottom:1px; margin-left:-2px;"
string(73) "padding-top:4px; margin-right:-3px; margin-bottom:-1px; margin-left:-2px;"
string(55) "padding-top:4px; margin-right:-3px; padding-bottom:1px;"
string(55) "padding-top:4px; margin-right:-3px; margin-bottom:-1px;"
string(34) "padding-top:4px; padding-left:2px;"
string(54) "padding-top:4px; padding-bottom:1px; padding-left:2px;"
string(54) "padding-top:4px; margin-bottom:-1px; padding-left:2px;"
string(34) "padding-top:4px; margin-left:-2px;"
string(54) "padding-top:4px; padding-bottom:1px; margin-left:-2px;"
string(54) "padding-top:4px; margin-bottom:-1px; margin-left:-2px;"
string(36) "padding-top:4px; padding-bottom:1px;"
string(36) "padding-top:4px; margin-bottom:-1px;"
string(16) "margin-top:-4px;"
string(35) "margin-top:-4px; padding-right:3px;"
string(53) "margin-top:-4px; padding-right:3px; padding-left:2px;"
string(73) "margin-top:-4px; padding-right:3px; padding-bottom:1px; padding-left:2px;"
string(73) "margin-top:-4px; padding-right:3px; margin-bottom:-1px; padding-left:2px;"
string(53) "margin-top:-4px; padding-right:3px; margin-left:-2px;"
string(73) "margin-top:-4px; padding-right:3px; padding-bottom:1px; margin-left:-2px;"
string(73) "margin-top:-4px; padding-right:3px; margin-bottom:-1px; margin-left:-2px;"
string(55) "margin-top:-4px; padding-right:3px; padding-bottom:1px;"
string(55) "margin-top:-4px; padding-right:3px; margin-bottom:-1px;"
string(35) "margin-top:-4px; margin-right:-3px;"
string(53) "margin-top:-4px; margin-right:-3px; padding-left:2px;"
string(73) "margin-top:-4px; margin-right:-3px; padding-bottom:1px; padding-left:2px;"
string(73) "margin-top:-4px; margin-right:-3px; margin-bottom:-1px; padding-left:2px;"
string(53) "margin-top:-4px; margin-right:-3px; margin-left:-2px;"
string(73) "margin-top:-4px; margin-right:-3px; padding-bottom:1px; margin-left:-2px;"
string(27) "margin:-4px -3px -1px -2px;"
string(55) "margin-top:-4px; margin-right:-3px; padding-bottom:1px;"
string(55) "margin-top:-4px; margin-right:-3px; margin-bottom:-1px;"
string(34) "margin-top:-4px; padding-left:2px;"
string(54) "margin-top:-4px; padding-bottom:1px; padding-left:2px;"
string(54) "margin-top:-4px; margin-bottom:-1px; padding-left:2px;"
string(34) "margin-top:-4px; margin-left:-2px;"
string(54) "margin-top:-4px; padding-bottom:1px; margin-left:-2px;"
string(54) "margin-top:-4px; margin-bottom:-1px; margin-left:-2px;"
string(36) "margin-top:-4px; padding-bottom:1px;"
string(36) "margin-top:-4px; margin-bottom:-1px;"
string(18) "padding-right:3px;"
string(36) "padding-right:3px; padding-left:2px;"
string(56) "padding-right:3px; padding-bottom:1px; padding-left:2px;"
string(56) "padding-right:3px; margin-bottom:-1px; padding-left:2px;"
string(36) "padding-right:3px; margin-left:-2px;"
string(56) "padding-right:3px; padding-bottom:1px; margin-left:-2px;"
string(56) "padding-right:3px; margin-bottom:-1px; margin-left:-2px;"
string(38) "padding-right:3px; padding-bottom:1px;"
string(38) "padding-right:3px; margin-bottom:-1px;"
string(18) "margin-right:-3px;"
string(36) "margin-right:-3px; padding-left:2px;"
string(56) "margin-right:-3px; padding-bottom:1px; padding-left:2px;"
string(56) "margin-right:-3px; margin-bottom:-1px; padding-left:2px;"
string(36) "margin-right:-3px; margin-left:-2px;"
string(56) "margin-right:-3px; padding-bottom:1px; margin-left:-2px;"
string(56) "margin-right:-3px; margin-bottom:-1px; margin-left:-2px;"
string(38) "margin-right:-3px; padding-bottom:1px;"
string(38) "margin-right:-3px; margin-bottom:-1px;"
string(17) "padding-left:2px;"
string(37) "padding-bottom:1px; padding-left:2px;"
string(37) "margin-bottom:-1px; padding-left:2px;"
string(17) "margin-left:-2px;"
string(37) "padding-bottom:1px; margin-left:-2px;"
string(37) "margin-bottom:-1px; margin-left:-2px;"
string(19) "padding-bottom:1px;"
string(19) "margin-bottom:-1px;"
```

Even if the type is `margin` the style will correctly shorten for a mix of positive and negative values:
```
string(15) "margin-top:4px;"
string(33) "margin-top:4px; margin-right:3px;"
string(50) "margin-top:4px; margin-right:3px; margin-left:2px;"
string(23) "margin:4px 3px 1px 2px;"
string(24) "margin:4px 3px -1px 2px;"
string(51) "margin-top:4px; margin-right:3px; margin-left:-2px;"
string(24) "margin:4px 3px 1px -2px;"
string(25) "margin:4px 3px -1px -2px;"
string(52) "margin-top:4px; margin-right:3px; margin-bottom:1px;"
string(53) "margin-top:4px; margin-right:3px; margin-bottom:-1px;"
string(34) "margin-top:4px; margin-right:-3px;"
string(51) "margin-top:4px; margin-right:-3px; margin-left:2px;"
string(24) "margin:4px -3px 1px 2px;"
string(25) "margin:4px -3px -1px 2px;"
string(52) "margin-top:4px; margin-right:-3px; margin-left:-2px;"
string(25) "margin:4px -3px 1px -2px;"
string(26) "margin:4px -3px -1px -2px;"
string(53) "margin-top:4px; margin-right:-3px; margin-bottom:1px;"
string(54) "margin-top:4px; margin-right:-3px; margin-bottom:-1px;"
string(32) "margin-top:4px; margin-left:2px;"
string(51) "margin-top:4px; margin-bottom:1px; margin-left:2px;"
string(52) "margin-top:4px; margin-bottom:-1px; margin-left:2px;"
string(33) "margin-top:4px; margin-left:-2px;"
string(52) "margin-top:4px; margin-bottom:1px; margin-left:-2px;"
string(53) "margin-top:4px; margin-bottom:-1px; margin-left:-2px;"
string(34) "margin-top:4px; margin-bottom:1px;"
string(35) "margin-top:4px; margin-bottom:-1px;"
string(16) "margin-top:-4px;"
string(34) "margin-top:-4px; margin-right:3px;"
string(51) "margin-top:-4px; margin-right:3px; margin-left:2px;"
string(24) "margin:-4px 3px 1px 2px;"
string(25) "margin:-4px 3px -1px 2px;"
string(52) "margin-top:-4px; margin-right:3px; margin-left:-2px;"
string(25) "margin:-4px 3px 1px -2px;"
string(26) "margin:-4px 3px -1px -2px;"
string(53) "margin-top:-4px; margin-right:3px; margin-bottom:1px;"
string(54) "margin-top:-4px; margin-right:3px; margin-bottom:-1px;"
string(35) "margin-top:-4px; margin-right:-3px;"
string(52) "margin-top:-4px; margin-right:-3px; margin-left:2px;"
string(25) "margin:-4px -3px 1px 2px;"
string(26) "margin:-4px -3px -1px 2px;"
string(53) "margin-top:-4px; margin-right:-3px; margin-left:-2px;"
string(26) "margin:-4px -3px 1px -2px;"
string(27) "margin:-4px -3px -1px -2px;"
string(54) "margin-top:-4px; margin-right:-3px; margin-bottom:1px;"
string(55) "margin-top:-4px; margin-right:-3px; margin-bottom:-1px;"
string(33) "margin-top:-4px; margin-left:2px;"
string(52) "margin-top:-4px; margin-bottom:1px; margin-left:2px;"
string(53) "margin-top:-4px; margin-bottom:-1px; margin-left:2px;"
string(34) "margin-top:-4px; margin-left:-2px;"
string(53) "margin-top:-4px; margin-bottom:1px; margin-left:-2px;"
string(54) "margin-top:-4px; margin-bottom:-1px; margin-left:-2px;"
string(35) "margin-top:-4px; margin-bottom:1px;"
string(36) "margin-top:-4px; margin-bottom:-1px;"
string(17) "margin-right:3px;"
string(34) "margin-right:3px; margin-left:2px;"
string(53) "margin-right:3px; margin-bottom:1px; margin-left:2px;"
string(54) "margin-right:3px; margin-bottom:-1px; margin-left:2px;"
string(35) "margin-right:3px; margin-left:-2px;"
string(54) "margin-right:3px; margin-bottom:1px; margin-left:-2px;"
string(55) "margin-right:3px; margin-bottom:-1px; margin-left:-2px;"
string(36) "margin-right:3px; margin-bottom:1px;"
string(37) "margin-right:3px; margin-bottom:-1px;"
string(18) "margin-right:-3px;"
string(35) "margin-right:-3px; margin-left:2px;"
string(54) "margin-right:-3px; margin-bottom:1px; margin-left:2px;"
string(55) "margin-right:-3px; margin-bottom:-1px; margin-left:2px;"
string(36) "margin-right:-3px; margin-left:-2px;"
string(55) "margin-right:-3px; margin-bottom:1px; margin-left:-2px;"
string(56) "margin-right:-3px; margin-bottom:-1px; margin-left:-2px;"
string(37) "margin-right:-3px; margin-bottom:1px;"
string(38) "margin-right:-3px; margin-bottom:-1px;"
string(16) "margin-left:2px;"
string(35) "margin-bottom:1px; margin-left:2px;"
string(36) "margin-bottom:-1px; margin-left:2px;"
string(17) "margin-left:-2px;"
string(36) "margin-bottom:1px; margin-left:-2px;"
string(37) "margin-bottom:-1px; margin-left:-2px;"
string(18) "margin-bottom:1px;"
string(19) "margin-bottom:-1px;"
```