From 3a72bd444b9335f8b8f41f1695989c361e9a267e Mon Sep 17 00:00:00 2001
From: "yu.dongliang" <18588496441@163.com>
Date: Sat, 23 May 2026 22:46:48 +0800
Subject: [PATCH] 1, add triangle buttons in the two end of scrollbar, 2,
 support 'top, right, bottom, left' of margin, padding, border

---
 examples/overflow.html |   5 +-
 html/abc_css.c         |  86 ++++++++++++++++-
 html/abc_css_border.c  |  79 +++++++++------
 html/abc_css_length.c  |  26 +++--
 html/abc_html.c        |  89 +++++++++++------
 html/abc_html.h        |  14 ++-
 html/abc_obj.c         |  17 ++--
 html/abc_obj.h         |  60 +++++++++---
 ui/__render_border.c   | 213 ++++++++++++++++++++++++++++++-----------
 ui/__render_text.c     |  17 ++--
 ui/abc_layout.c        |  61 +++++++-----
 ui/abc_layout_div.c    |  10 +-
 ui/abc_layout_h1.c     |  23 +++--
 ui/abc_layout_img.c    |   6 +-
 ui/abc_layout_table.c  |  71 +++++++++-----
 ui/abc_layout_text.c   |   9 +-
 ui/abc_render_img.c    |   8 +-
 ui/abc_render_li.c     |   2 +-
 ui/abc_render_td.c     |  24 +----
 ui/abc_render_text.c   |   2 +-
 ui/main.c              |  20 +---
 21 files changed, 566 insertions(+), 276 deletions(-)

diff --git a/examples/overflow.html b/examples/overflow.html
index 54e5b71..b0a9ba3 100644
--- a/examples/overflow.html
+++ b/examples/overflow.html
@@ -4,11 +4,10 @@
 <meta charset="utf-8">
 <style>
 div {
-	background-color:lightGray;
 	width: 200px;
-	height: 50px;
+	height: 60px;
 	border: 1px dotted black;
-	padding: 25px;
+	padding: 20px;
 	overflow: scroll;
 	scrollbar-width: 15px;
 	scrollbar-color: orangeRed lightGray;
diff --git a/html/abc_css.c b/html/abc_css.c
index 430b35c..4c555ad 100644
--- a/html/abc_css.c
+++ b/html/abc_css.c
@@ -656,6 +656,68 @@ next:
 	} while (c);
 }
 
+static void __css_padding_split(abc_obj_t* obj, abc_attr_t* attr, int top, int bottom, int left, int right)
+{
+	char*  p0 = NULL;
+	char*  p1 = attr->value->data;
+	int    n  = 0;
+	int    c;
+
+	char*  strs[4] = {NULL};
+	size_t lens[4];
+
+	do {
+		c = *p1;
+
+		if ('\0' == c || ' ' == c) {
+			if (!p0)
+				goto next;
+
+			strs[n] = p0;
+			lens[n] = (size_t)(p1 - p0);
+
+			if (++n >= 4)
+				break;
+
+			p0 = NULL;
+		} else {
+			if (!p0)
+				p0 = p1;
+		}
+next:
+		p1++;
+	} while (c);
+
+	switch (n) {
+		case 1:
+			abc_obj_set_attr(obj, top,    strs[0], lens[0]);
+			abc_obj_set_attr(obj, bottom, strs[0], lens[0]);
+			abc_obj_set_attr(obj, left,   strs[0], lens[0]);
+			abc_obj_set_attr(obj, right,  strs[0], lens[0]);
+			break;
+		case 2:
+			abc_obj_set_attr(obj, top,    strs[0], lens[0]);
+			abc_obj_set_attr(obj, bottom, strs[0], lens[0]);
+			abc_obj_set_attr(obj, left,   strs[1], lens[1]);
+			abc_obj_set_attr(obj, right,  strs[1], lens[1]);
+			break;
+		case 3:
+			abc_obj_set_attr(obj, top,    strs[0], lens[0]);
+			abc_obj_set_attr(obj, left,   strs[1], lens[1]);
+			abc_obj_set_attr(obj, right,  strs[1], lens[1]);
+			abc_obj_set_attr(obj, bottom, strs[2], lens[2]);
+			break;
+		case 4:
+			abc_obj_set_attr(obj, top,    strs[0], lens[0]);
+			abc_obj_set_attr(obj, right,  strs[1], lens[1]);
+			abc_obj_set_attr(obj, bottom, strs[2], lens[2]);
+			abc_obj_set_attr(obj, left,   strs[3], lens[3]);
+			break;
+		default:
+			break;
+	};
+}
+
 static void __css_text_transform(abc_obj_t* obj, int case_flag)
 {
 	if (obj->text) {
@@ -707,11 +769,25 @@ static void __css_set_attr(abc_obj_t* obj, abc_attr_t* attr)
 			__css_background(obj, attr);
 			break;
 
-		case ABC_HTML_ATTR_BG_COLOR:
-		case ABC_HTML_ATTR_BG_IMAGE:
-		case ABC_HTML_ATTR_BG_REPEAT:
-		case ABC_HTML_ATTR_BG_POSITION:
-			abc_obj_set_attr(obj, attr->type, attr->value->data, attr->value->len);
+		case ABC_CSS_MARGIN:
+			__css_padding_split(obj,
+					attr,
+					ABC_CSS_MARGIN_TOP,
+					ABC_CSS_MARGIN_BOTTOM, ABC_CSS_MARGIN_LEFT, ABC_CSS_MARGIN_RIGHT);
+			break;
+
+		case ABC_CSS_BORDER:
+			abc_obj_set_attr(obj, ABC_CSS_BORDER_TOP,    attr->value->data, attr->value->len);
+			abc_obj_set_attr(obj, ABC_CSS_BORDER_BOTTOM, attr->value->data, attr->value->len);
+			abc_obj_set_attr(obj, ABC_CSS_BORDER_LEFT,   attr->value->data, attr->value->len);
+			abc_obj_set_attr(obj, ABC_CSS_BORDER_RIGHT,  attr->value->data, attr->value->len);
+			break;
+
+		case ABC_CSS_PADDING:
+			__css_padding_split(obj,
+					attr,
+					ABC_CSS_PADDING_TOP,
+					ABC_CSS_PADDING_BOTTOM, ABC_CSS_PADDING_LEFT, ABC_CSS_PADDING_RIGHT);
 			break;
 
 		case ABC_HTML_ATTR_TEXT_TRANSFORM:
diff --git a/html/abc_css_border.c b/html/abc_css_border.c
index 00f836c..a696d7f 100644
--- a/html/abc_css_border.c
+++ b/html/abc_css_border.c
@@ -33,13 +33,13 @@ static void __css_border_type(int* type, const char* name, size_t name_len)
 	}
 }
 
-int abc_css_border(double* r, double* g, double* b, int* width, int* type, abc_obj_t* obj, const uint8_t* str)
+int  abc_css_border2(double border_color[3], int* border_width, int* border_style, abc_obj_t* obj, int width, const uint8_t* str)
 {
-	*r = 0.0;
-	*g = 0.0;
-	*b = 0.0;
-	*width = 0;
-	*type  = ABC_BORDER_SOLID;
+	border_color[0] = 0.0;
+	border_color[1] = 0.0;
+	border_color[2] = 0.0;
+	*border_width   = 0;
+	*border_style   = ABC_BORDER_SOLID;
 
 	const uint8_t* p    = NULL;
 	const uint8_t* unit = NULL;
@@ -92,23 +92,23 @@ int abc_css_border(double* r, double* g, double* b, int* width, int* type, abc_o
 				goto next;
 
 			if (percent) {
-				value *= 0.01;
+				value *= 0.01 * width;
 
 				if (0 == i)
-					*width = value;
+					*border_width = value;
 
 			} else if (p) {
 
 				if (i > 1)
-					abc_css_color(r, g, b, p, -1);
+					abc_css_color(border_color, border_color + 1, border_color + 2, p, -1);
 				else if (1 == i)
-					__css_border_type(type, p, (size_t)(str - p));
+					__css_border_type(border_style, p, (size_t)(str - p));
 
 			} else if (unit) {
 				// for other css units, ignore
 
 				if (0 == i)
-					*width = value;
+					*border_width = value;
 			}
 
 			p       = NULL;
@@ -130,28 +130,49 @@ next:
 	return 0;
 }
 
-int abc_css_margin(abc_obj_t* obj)
+static int __css_margin(abc_obj_t* obj, int width, int type)
 {
-	int type    = ABC_BORDER_SOLID;
-	int margin  = 2;
-	int border  = 0;
-	int padding = 2;
+	abc_attr_t* attr = abc_obj_get_attr(obj, type);
 
-	double r = 0.0;
-	double g = 0.0;
-	double b = 0.0;
+	if (attr && attr->value && attr->value->len > 0)
+		return abc_css_length(obj, width, attr->value->data);
+	return 0;
+}
+
+static int __css_border(abc_obj_t* obj, int width, int type)
+{
+	double color[3];
+	int    style;
+	int    w = 0;
+
+	abc_attr_t* attr = abc_obj_get_attr(obj, type);
+
+	if (attr && attr->value && attr->value->len > 0)
+		abc_css_border2(color, &w, &style, obj, width, attr->value->data);
 
-	abc_attr_t* attr = abc_obj_get_attr(obj, ABC_HTML_ATTR_MARGIN);
-	if (attr)
-		margin = atoi(attr->value->data);
+	return w;
+}
 
-	attr = abc_obj_get_attr(obj, ABC_HTML_ATTR_BORDER);
-	if (attr)
-		abc_css_border(&r, &g, &b, &border, &type, obj, attr->value->data);
+void abc_css_margin(abc_obj_t* obj, int width)
+{
+	obj->margin_top     = __css_margin(obj, width, ABC_CSS_MARGIN_TOP);
+	obj->margin_bottom  = __css_margin(obj, width, ABC_CSS_MARGIN_BOTTOM);
+	obj->margin_left    = __css_margin(obj, width, ABC_CSS_MARGIN_LEFT);
+	obj->margin_right   = __css_margin(obj, width, ABC_CSS_MARGIN_RIGHT);
+}
 
-	attr = abc_obj_get_attr(obj, ABC_HTML_ATTR_PADDING);
-	if (attr)
-		padding = atoi(attr->value->data);
+void abc_css_border(abc_obj_t* obj, int width)
+{
+	obj->border_top    = __css_border(obj, width, ABC_CSS_BORDER_TOP);
+	obj->border_bottom = __css_border(obj, width, ABC_CSS_BORDER_BOTTOM);
+	obj->border_left   = __css_border(obj, width, ABC_CSS_BORDER_LEFT);
+	obj->border_right  = __css_border(obj, width, ABC_CSS_BORDER_RIGHT);
+}
 
-	return margin + border + padding;
+void abc_css_padding(abc_obj_t* obj, int width)
+{
+	obj->padding_top    = __css_margin(obj, width, ABC_CSS_PADDING_TOP);
+	obj->padding_bottom = __css_margin(obj, width, ABC_CSS_PADDING_BOTTOM);
+	obj->padding_left   = __css_margin(obj, width, ABC_CSS_PADDING_LEFT);
+	obj->padding_right  = __css_margin(obj, width, ABC_CSS_PADDING_RIGHT);
 }
diff --git a/html/abc_css_length.c b/html/abc_css_length.c
index 26e650d..9b1fa6a 100644
--- a/html/abc_css_length.c
+++ b/html/abc_css_length.c
@@ -1,6 +1,6 @@
 #include"abc_html.h"
 
-int abc_css_length(abc_obj_t* obj, const uint8_t* str, int len)
+int abc_css_length(abc_obj_t* obj, int width, const uint8_t* str)
 {
 	const uint8_t* p    = str;
 	const uint8_t* unit = NULL;
@@ -47,7 +47,7 @@ int abc_css_length(abc_obj_t* obj, const uint8_t* str, int len)
 				value = -value;
 
 			if (percent)
-				x = value * 0.01 * len;
+				x = value * 0.01 * width;
 			else if (unit) {
 				// for other css units, ignore
 				x = value;
@@ -69,14 +69,19 @@ next:
 	return x;
 }
 
-int abc_css_width(abc_obj_t* obj, int width,  int margin)
+int abc_css_width(abc_obj_t* obj, int width)
 {
 	abc_attr_t* attr = abc_obj_get_attr(obj, ABC_HTML_ATTR_WIDTH);
 
 	if (attr && attr->value && attr->value->len > 0) {
 
-		obj->w  = abc_css_length(obj, attr->value->data, width);
-		obj->w += margin * 2;
+		obj->w  = abc_css_length(obj, width, attr->value->data);
+
+		obj->w += obj->margin_left + obj->border_left
+			                       + obj->padding_left
+			                       + obj->padding_right
+			                       + obj->border_right
+			                       + obj->margin_right;
 
 		if (obj->w > width - obj->x)
 			obj->w = width - obj->x;
@@ -87,14 +92,19 @@ int abc_css_width(abc_obj_t* obj, int width,  int margin)
 	return 0;
 }
 
-int abc_css_height(abc_obj_t* obj, int height, int margin)
+int abc_css_height(abc_obj_t* obj, int height)
 {
 	abc_attr_t* attr = abc_obj_get_attr(obj, ABC_HTML_ATTR_HEIGHT);
 
 	if (attr && attr->value && attr->value->len > 0) {
 
-		obj->h  = abc_css_length(obj, attr->value->data, height);
-		obj->h += margin * 2;
+		obj->h  = abc_css_length(obj, height, attr->value->data);
+
+		obj->h += obj->margin_top + obj->border_top
+			                      + obj->padding_top
+			                      + obj->padding_bottom
+			                      + obj->border_bottom
+			                      + obj->margin_bottom;
 
 		if (obj->h > height - obj->y)
 			obj->h = height - obj->y;
diff --git a/html/abc_html.c b/html/abc_html.c
index ca596fe..beecad4 100644
--- a/html/abc_html.c
+++ b/html/abc_html.c
@@ -1,15 +1,30 @@
 #include"abc_html.h"
 
-// HTML attrs
+// HTML & CSS attrs
 static char* src_keys[]        = {"src",        "源",       NULL};
 static char* rel_keys[]        = {"rel",        "关系",     NULL};
 static char* href_keys[]       = {"href",       "地址",     NULL};
 
 static char* width_keys[]      = {"width",      "宽度",     NULL};
 static char* height_keys[]     = {"height",     "高度",     NULL};
-static char* margin_keys[]     = {"margin",     "外边距",   NULL};
-static char* border_keys[]     = {"border",     "边框",     NULL};
-static char* padding_keys[]    = {"padding",    "内边距",   NULL};
+
+static char* margin_keys[]         = {"margin",          "外边距",   NULL};
+static char* margin_top_keys[]     = {"margin-top",      "上边缘",   NULL};
+static char* margin_bottom_keys[]  = {"margin-bottom",   "下边缘",   NULL};
+static char* margin_left_keys[]    = {"margin-left",     "左边缘",   NULL};
+static char* margin_right_keys[]   = {"margin-right",    "右边缘",   NULL};
+
+static char* border_keys[]         = {"border",          "边框",     NULL};
+static char* border_top_keys[]     = {"border-top",      "上边框",   NULL};
+static char* border_bottom_keys[]  = {"border-bottom",   "下边框",   NULL};
+static char* border_left_keys[]    = {"border-left",     "左边框",   NULL};
+static char* border_right_keys[]   = {"border-right",    "右边框",   NULL};
+
+static char* padding_keys[]        = {"padding",         "内边距",   NULL};
+static char* padding_top_keys[]    = {"padding-top",     "上填充",   NULL};
+static char* padding_bottom_keys[] = {"padding-bottom",  "下填充",   NULL};
+static char* padding_left_keys[]   = {"padding-left",    "左填充",   NULL};
+static char* padding_right_keys[]  = {"padding-right",   "右填充",   NULL};
 
 static char* position_keys[]   = {"position",   "定位",     NULL};
 static char* top_keys[]        = {"top",        "上",       NULL};
@@ -117,12 +132,14 @@ static char* progress_keys[]   = {"progress",   "进度条",   NULL};
 static char* script_keys[]     = {"script",     "脚本",     NULL};
 static char* style_keys[]      = {"style",      "样式",     NULL};
 
+// css selectors
 static char* css_id_keys[]          = {"#",      NULL};
 static char* css_class_keys[]       = {".",      NULL};
 static char* css_other_keys[]       = {"*",      NULL};
 static char* css_pse_class_keys[]   = {":",      NULL};
 static char* css_pse_element_keys[] = {"::",     NULL};
 
+// css pse class (element)
 static char* css_link_keys[]    = {":link",    "未访问",    NULL};
 static char* css_visited_keys[] = {":visited", "已访问",    NULL};
 static char* css_hover_keys[]   = {":hover",   "正在指向",  NULL};
@@ -147,40 +164,54 @@ static html_attr_t  meta_attrs[] =
 static html_attr_t  body_attrs[] =
 {
 #define ABC_CSS_BOX(margin, border, padding) \
-	{margin_keys,      #margin,     ABC_HTML_ATTR_MARGIN,         ABC_HTML_FLAG_SHOW}, \
-	{border_keys,      #border,     ABC_HTML_ATTR_BORDER,         ABC_HTML_FLAG_SHOW}, \
-	{padding_keys,     #padding,    ABC_HTML_ATTR_PADDING,        ABC_HTML_FLAG_SHOW}, \
+	{border_keys,         #border,   ABC_CSS_BORDER,              ABC_HTML_FLAG_SHOW}, \
+	{border_top_keys,     #border,   ABC_CSS_BORDER_TOP,          ABC_HTML_FLAG_SHOW}, \
+	{border_bottom_keys,  #border,   ABC_CSS_BORDER_BOTTOM,       ABC_HTML_FLAG_SHOW}, \
+	{border_left_keys,    #border,   ABC_CSS_BORDER_LEFT,         ABC_HTML_FLAG_SHOW}, \
+	{border_right_keys,   #border,   ABC_CSS_BORDER_RIGHT,        ABC_HTML_FLAG_SHOW}, \
+	\
+	{margin_keys,         #margin,   ABC_CSS_MARGIN,              ABC_HTML_FLAG_SHOW}, \
+	{margin_top_keys,     #margin,   ABC_CSS_MARGIN_TOP,          ABC_HTML_FLAG_SHOW}, \
+	{margin_bottom_keys,  #margin,   ABC_CSS_MARGIN_BOTTOM,       ABC_HTML_FLAG_SHOW}, \
+	{margin_left_keys,    #margin,   ABC_CSS_MARGIN_LEFT,         ABC_HTML_FLAG_SHOW}, \
+	{margin_right_keys,   #margin,   ABC_CSS_MARGIN_RIGHT,        ABC_HTML_FLAG_SHOW}, \
+	\
+	{padding_keys,        #padding,  ABC_CSS_PADDING,             ABC_HTML_FLAG_SHOW}, \
+	{padding_top_keys,    #padding,  ABC_CSS_PADDING_TOP,         ABC_HTML_FLAG_SHOW}, \
+	{padding_bottom_keys, #padding,  ABC_CSS_PADDING_BOTTOM,      ABC_HTML_FLAG_SHOW}, \
+	{padding_left_keys,   #padding,  ABC_CSS_PADDING_LEFT,        ABC_HTML_FLAG_SHOW}, \
+	{padding_right_keys,  #padding,  ABC_CSS_PADDING_RIGHT,       ABC_HTML_FLAG_SHOW}, \
 	\
-	{overflow_keys,     "",         ABC_CSS_OVERFLOW,             ABC_HTML_FLAG_SHOW}, \
-	{scroll_width_keys, "",         ABC_CSS_SCROLLBAR_WIDTH,      ABC_HTML_FLAG_SHOW}, \
-	{scroll_color_keys, "",         ABC_CSS_SCROLLBAR_COLOR,      ABC_HTML_FLAG_SHOW}, \
+	{overflow_keys,       "",        ABC_CSS_OVERFLOW,            ABC_HTML_FLAG_SHOW}, \
+	{scroll_width_keys,   "",        ABC_CSS_SCROLLBAR_WIDTH,     ABC_HTML_FLAG_SHOW}, \
+	{scroll_color_keys,   "",        ABC_CSS_SCROLLBAR_COLOR,     ABC_HTML_FLAG_SHOW}, \
 	\
-	{position_keys,     "",         ABC_CSS_POSITION,             ABC_HTML_FLAG_SHOW}, \
-	{top_keys,          "",         ABC_CSS_TOP,                  ABC_HTML_FLAG_SHOW}, \
-	{bottom_keys,       "",         ABC_CSS_BOTTOM,               ABC_HTML_FLAG_SHOW}, \
-	{left_keys,         "",         ABC_CSS_LEFT,                 ABC_HTML_FLAG_SHOW}, \
-	{right_keys,        "",         ABC_CSS_RIGHT,                ABC_HTML_FLAG_SHOW}, \
+	{position_keys,       "",        ABC_CSS_POSITION,            ABC_HTML_FLAG_SHOW}, \
+	{top_keys,            "",        ABC_CSS_TOP,                 ABC_HTML_FLAG_SHOW}, \
+	{bottom_keys,         "",        ABC_CSS_BOTTOM,              ABC_HTML_FLAG_SHOW}, \
+	{left_keys,           "",        ABC_CSS_LEFT,                ABC_HTML_FLAG_SHOW}, \
+	{right_keys,          "",        ABC_CSS_RIGHT,               ABC_HTML_FLAG_SHOW}, \
 	\
-	{width_keys,        "",         ABC_HTML_ATTR_WIDTH,          ABC_HTML_FLAG_SHOW}, \
-	{height_keys,       "",         ABC_HTML_ATTR_HEIGHT,         ABC_HTML_FLAG_SHOW},
+	{width_keys,          "",        ABC_HTML_ATTR_WIDTH,         ABC_HTML_FLAG_SHOW}, \
+	{height_keys,         "",        ABC_HTML_ATTR_HEIGHT,        ABC_HTML_FLAG_SHOW},
 
 #define ABC_CSS_SELECTOR() \
-	{style_keys,        "",         ABC_HTML_ATTR_STYLE,          ABC_HTML_FLAG_SHOW}, \
-	{class_keys,        "",         ABC_HTML_ATTR_CLASS,          ABC_HTML_FLAG_SHOW}, \
-	{id_keys,           "",         ABC_HTML_ATTR_ID,             ABC_HTML_FLAG_SHOW},
+	{style_keys,          "",        ABC_HTML_ATTR_STYLE,         ABC_HTML_FLAG_SHOW}, \
+	{class_keys,          "",        ABC_HTML_ATTR_CLASS,         ABC_HTML_FLAG_SHOW}, \
+	{id_keys,             "",        ABC_HTML_ATTR_ID,            ABC_HTML_FLAG_SHOW},
 
 #define ABC_CSS_BACK_GROUND(color) \
-	{bg_keys,           "",         ABC_HTML_ATTR_BG,             ABC_HTML_FLAG_SHOW}, \
-	{bg_color_keys,    #color,      ABC_HTML_ATTR_BG_COLOR,       ABC_HTML_FLAG_SHOW}, \
-	{bg_image_keys,     "",         ABC_HTML_ATTR_BG_IMAGE,       ABC_HTML_FLAG_SHOW}, \
-	{bg_repeat_keys,    "",         ABC_HTML_ATTR_BG_REPEAT,      ABC_HTML_FLAG_SHOW}, \
-	{bg_position_keys,  "",         ABC_HTML_ATTR_BG_POSITION,    ABC_HTML_FLAG_SHOW},
+	{bg_keys,             "",        ABC_HTML_ATTR_BG,            ABC_HTML_FLAG_SHOW}, \
+	{bg_color_keys,       #color,    ABC_HTML_ATTR_BG_COLOR,      ABC_HTML_FLAG_SHOW}, \
+	{bg_image_keys,       "",        ABC_HTML_ATTR_BG_IMAGE,      ABC_HTML_FLAG_SHOW}, \
+	{bg_repeat_keys,      "",        ABC_HTML_ATTR_BG_REPEAT,     ABC_HTML_FLAG_SHOW}, \
+	{bg_position_keys,    "",        ABC_HTML_ATTR_BG_POSITION,   ABC_HTML_FLAG_SHOW},
 
 #define ABC_CSS_FONT(font, size, color, style) \
-	{font_keys,        #font,       ABC_HTML_ATTR_FONT,           0}, \
-	{font_size_keys,   #size,       ABC_HTML_ATTR_FONT_SIZE,      0}, \
-	{font_color_keys,  #color,      ABC_HTML_ATTR_FONT_COLOR,     ABC_HTML_FLAG_SHOW}, \
-	{font_style_keys,  #style,      ABC_HTML_ATTR_FONT_STYLE,     0},
+	{font_keys,           #font,     ABC_HTML_ATTR_FONT,          0}, \
+	{font_size_keys,      #size,     ABC_HTML_ATTR_FONT_SIZE,     0}, \
+	{font_color_keys,     #color,    ABC_HTML_ATTR_FONT_COLOR,    ABC_HTML_FLAG_SHOW}, \
+	{font_style_keys,     #style,    ABC_HTML_ATTR_FONT_STYLE,    0},
 
 #define ABC_CSS_TEXT(align, underline) \
 	{text_align_keys,      #align,      ABC_HTML_ATTR_TEXT_ALIGN,      ABC_HTML_FLAG_SHOW}, \
diff --git a/html/abc_html.h b/html/abc_html.h
index be8c1ba..6885a51 100644
--- a/html/abc_html.h
+++ b/html/abc_html.h
@@ -58,12 +58,16 @@ int  abc_css_active(abc_obj_t*  obj);
 int  abc_css_bg_position(float*  x, float*  y, float   w, float h, abc_obj_t* obj, const uint8_t* str);
 
 int  abc_css_color (double* r, double* g, double* b, const uint8_t* str, size_t len);
-int  abc_css_border(double* r, double* g, double* b, int* width, int* type, abc_obj_t* obj, const uint8_t* str);
-int  abc_css_margin(abc_obj_t* obj);
-int  abc_css_length(abc_obj_t* obj, const uint8_t* str, int len);
 
-int  abc_css_width (abc_obj_t* obj, int width,  int margin);
-int  abc_css_height(abc_obj_t* obj, int height, int margin);
+int  abc_css_border2(double border_color[3], int* border_width, int* border_style, abc_obj_t* obj, int width, const uint8_t* str);
+
+int  abc_css_length (abc_obj_t* obj, int width, const uint8_t* str);
+void abc_css_margin (abc_obj_t* obj, int width);
+void abc_css_border (abc_obj_t* obj, int width);
+void abc_css_padding(abc_obj_t* obj, int width);
+
+int  abc_css_width  (abc_obj_t* obj, int width);
+int  abc_css_height (abc_obj_t* obj, int height);
 
 int  abc_css_position(const uint8_t* str);
 int  abc_css_overflow(const uint8_t* str);
diff --git a/html/abc_obj.c b/html/abc_obj.c
index 3a27037..411572f 100644
--- a/html/abc_obj.c
+++ b/html/abc_obj.c
@@ -594,11 +594,12 @@ scf_string_t* abc_ol_list_style(abc_obj_t* obj, int num)
 	return __li_style_number(num, 10, '0');
 }
 
-static int __obj_scroll_xy(int* position, int move, int thumb, int track, int content_out)
+static int __obj_scroll_xy(int* position, int move, int thumb, int track, int content_out, int width, int padding)
 {
-	int range = track - thumb;
-	int min   = thumb / 2;
-	int max   = track - min;
+	int L     = thumb / 2;
+	int min   = width + L;
+	int max   = track - padding - width - L;
+	int range = max - min;
 
 	if (*position < min)
 		*position = min;
@@ -618,16 +619,16 @@ static int __obj_scroll_xy(int* position, int move, int thumb, int track, int co
 	return diff;
 }
 
-int abc_obj_scroll_y(abc_obj_t* obj, int thumb, int track, int move)
+int abc_obj_scroll_y(abc_obj_t* obj,  int thumb_len, int track_len, int move, int scroll_width, int bottom_padding)
 {
 	int content_out = obj->content_h - obj->h;
 
-	return __obj_scroll_xy(&obj->scroll_y, move, thumb, track, content_out);
+	return __obj_scroll_xy(&obj->scroll_y, move, thumb_len, track_len, content_out, scroll_width, bottom_padding);
 }
 
-int abc_obj_scroll_x(abc_obj_t* obj, int thumb, int track, int move)
+int abc_obj_scroll_x(abc_obj_t* obj,  int thumb_len, int track_len, int move, int scroll_width, int right_padding)
 {
 	int content_out = obj->content_w - obj->w;
 
-	return __obj_scroll_xy(&obj->scroll_x, move, thumb, track, content_out);
+	return __obj_scroll_xy(&obj->scroll_x, move, thumb_len, track_len, content_out, scroll_width, right_padding);
 }
diff --git a/html/abc_obj.h b/html/abc_obj.h
index 591bf93..d775695 100644
--- a/html/abc_obj.h
+++ b/html/abc_obj.h
@@ -110,10 +110,6 @@ enum abc_objs
 	ABC_HTML_ATTR_WIDTH,
 	ABC_HTML_ATTR_HEIGHT,
 
-	ABC_HTML_ATTR_MARGIN,
-	ABC_HTML_ATTR_BORDER,
-	ABC_HTML_ATTR_PADDING,
-
 	ABC_HTML_ATTR_XMLNS,
 	ABC_HTML_ATTR_XMLANG,
 	ABC_HTML_ATTR_LANG,
@@ -127,13 +123,26 @@ enum abc_objs
 	ABC_HTML_ATTR_CONTROLS,
 
 	// css attrs
-	ABC_CSS_LIST_STYLE,
-	ABC_CSS_LIST_STYLE_TYPE,
-	ABC_CSS_LIST_STYLE_IMAGE,
-	ABC_CSS_LIST_STYLE_POSITION,
+	ABC_CSS_MARGIN,
+	ABC_CSS_MARGIN_TOP,
+	ABC_CSS_MARGIN_BOTTOM,
+	ABC_CSS_MARGIN_LEFT,
+	ABC_CSS_MARGIN_RIGHT,
+
+	ABC_CSS_BORDER,
+	ABC_CSS_BORDER_TOP,
+	ABC_CSS_BORDER_BOTTOM,
+	ABC_CSS_BORDER_LEFT,
+	ABC_CSS_BORDER_RIGHT,
 
 	ABC_CSS_BORDER_COLLAPSE,
 
+	ABC_CSS_PADDING,
+	ABC_CSS_PADDING_TOP,
+	ABC_CSS_PADDING_BOTTOM,
+	ABC_CSS_PADDING_LEFT,
+	ABC_CSS_PADDING_RIGHT,
+
 	ABC_CSS_POSITION,
 	ABC_CSS_TOP,
 	ABC_CSS_BOTTOM,
@@ -144,6 +153,11 @@ enum abc_objs
 	ABC_CSS_SCROLLBAR_WIDTH,
 	ABC_CSS_SCROLLBAR_COLOR,
 
+	ABC_CSS_LIST_STYLE,
+	ABC_CSS_LIST_STYLE_TYPE,
+	ABC_CSS_LIST_STYLE_IMAGE,
+	ABC_CSS_LIST_STYLE_POSITION,
+
 	// css pse class (element)
 	ABC_CSS_FIRST_CHILD,
 
@@ -266,7 +280,26 @@ struct abc_obj_s
 	scf_list_t      css_pse_rules;
 	int             css_pse_type;
 
-	int             d; // margin + border + padding
+	int             border_top;
+	int             border_bottom;
+	int             border_left;
+	int             border_right;
+
+	int             margin_top;
+	int             margin_bottom;
+	int             margin_left;
+	int             margin_right;
+
+	int             padding_top;
+	int             padding_bottom;
+	int             padding_left;
+	int             padding_right;
+
+	int             top;
+	int             bottom;
+	int             left;
+	int             right;
+
 	int             w0;
 	int             h0;
 
@@ -292,9 +325,8 @@ struct abc_obj_s
 	int             content_w;
 	int             content_h;
 
+	int             list_order_width;
 	double          y_bearing;
-	int             margin;
-	int             padding;
 
 	int             td_width;  // width  of a table element
 	int             td_height; // height of a table element
@@ -337,9 +369,9 @@ abc_attr_t*    abc_obj_find_attr(abc_obj_t* obj, int key);
 
 abc_obj_t*     abc_obj_find_type(abc_obj_t* root, int type);
 
-void           abc_dfs_update_xy(abc_obj_t* root, int dx,    int dy);
-int            abc_obj_scroll_y (abc_obj_t* obj,  int thumb, int track, int move);
-int            abc_obj_scroll_x (abc_obj_t* obj,  int thumb, int track, int move);
+void           abc_dfs_update_xy(abc_obj_t* root, int dx, int dy);
+int            abc_obj_scroll_y (abc_obj_t* obj,  int thumb_len, int track_len, int move, int scroll_width, int bottom_padding);
+int            abc_obj_scroll_x (abc_obj_t* obj,  int thumb_len, int track_len, int move, int scroll_width, int right_padding);
 
 scf_string_t*  abc_obj_to_string(abc_obj_t* obj);
 
diff --git a/ui/__render_border.c b/ui/__render_border.c
index 25404c3..8031486 100644
--- a/ui/__render_border.c
+++ b/ui/__render_border.c
@@ -23,15 +23,33 @@ static const char* frag_shader =
 	"uniform vec4  thumbColor; \n"
 	"uniform vec4  trackColor; \n"
 	"uniform vec2  wh; \n"
+	"uniform float scroll_x; \n"
+	"uniform float scroll_w; \n"
+	"uniform float h_scroll; \n"
+	"\n"
 	"uniform float w_scroll; \n"
 	"uniform float scroll_y; \n"
 	"uniform float scroll_h; \n"
-	"vec4 yScrollColor(float center, float L, float R, float dR, float y, float dx) { \n"
-	"    if (y < center - L + R) { \n"
+	"uniform float scroll_padding; \n"
+	"uniform vec4  scroll_tri; \n"
+	"\n"
+	"vec4 yScrollColor(float L0, float L1, vec2 tri, float center, float L, float R, float dR, float y, float dx) { \n"
+	"    if (y > L1 - R * tri.y) { \n"
+	"        float dy = L1 - y; \n"
+	"        float beta = smoothstep(dy - dR, dy + dR, abs(dx) * 1.732); \n"
+	"        return mix(thumbColor, trackColor, beta); \n"
+	"\n"
+	"    } else if (y < L0 + R * tri.x) { \n"
+	"        float dy = y - L0; \n"
+	"        float beta = smoothstep(dy - dR, dy + dR, abs(dx) * 1.732); \n"
+	"        return mix(thumbColor, trackColor, beta); \n"
+	"\n"
+	"    } else if (y < center - L + R) { \n"
 	"        float dy = center - L + R - y; \n"
 	"        float r  = sqrt(dx * dx + dy * dy); \n"
 	"        float beta = smoothstep(R - dR, R + dR, r); \n"
 	"        return mix(thumbColor, trackColor, beta); \n"
+	"\n"
 	"    } else if (y > center + L - R) { \n"
 	"        float dy = center + L - R - y; \n"
 	"        float r  = sqrt(dx * dx + dy * dy); \n"
@@ -53,9 +71,19 @@ static const char* frag_shader =
 	"    } else if (x > 1.0 - x_border - w_scroll && x < 1.0 - x_border) { \n"
 	"        float R  = w_scroll / 2.0; \n"
 	"        float L  = scroll_h / 2.0; \n"
+	"        float L0 = y_border; \n"
+	"        float L1 = 1.0 - y_border - scroll_padding / wh.y; \n"
 	"        float dx = 1.0 - x_border - x - R; \n"
-	"        float dR = 1.0 / wh.y; \n"
-	"        outputColor = yScrollColor(scroll_y, L, R * aspect, dR, y, dx * aspect); \n"
+	"        float dR = 1.25 / wh.y; \n"
+	"        outputColor = yScrollColor(L0, L1, scroll_tri.zw, scroll_y, L, R * aspect, dR, y, dx * aspect); \n"
+	"    } else if (y > 1.0 - y_border - h_scroll && y < 1.0 - y_border) { \n"
+	"        float R  = h_scroll / 2.0; \n"
+	"        float L  = scroll_w / 2.0; \n"
+	"        float L0 = x_border; \n"
+	"        float L1 = 1.0 - x_border - scroll_padding / wh.x; \n"
+	"        float dy = 1.0 - y_border - y - R; \n"
+	"        float dR = 1.25 / wh.x; \n"
+	"        outputColor = yScrollColor(L0, L1, scroll_tri.xy, scroll_x, L, R / aspect, dR, x, dy / aspect); \n"
 	"    } else { \n"
 	"        outputColor = bgColor; \n"
 	"    } \n"
@@ -77,15 +105,67 @@ static GLuint uniform_thumbColor;
 static GLuint uniform_trackColor;
 
 static GLuint uniform_wh;
+static GLuint uniform_h_scroll;
+static GLuint uniform_scroll_x;
+static GLuint uniform_scroll_w;
+
 static GLuint uniform_w_scroll;
 static GLuint uniform_scroll_y;
 static GLuint uniform_scroll_h;
+static GLuint uniform_scroll_padding;
+static GLuint uniform_scroll_tri;
 
 static int __render_fini_border(abc_render_t* render)
 {
 	return 0;
 }
 
+static int __scroll_move(int down_x, int down_y, int move_x, int move_y,
+		int x0,
+		int x1, int y0, int y1, int scroll_width, GLfloat scroll_tri[2])
+{
+	int down = 0;
+	int move = 0;
+
+	if (down_x > x0
+			&& down_x < x1
+			&& down_y > y0 && down_y < y1) {
+		down = 1;
+
+		if (down_y < y0 + scroll_width) {
+			move = -8;
+			scroll_tri[0] = 1.0;
+
+		} else if (down_y > y1 - scroll_width) {
+			move = 8;
+			scroll_tri[1] = 1.0;
+		}
+	}
+
+	if (move_x > x0
+			&& move_x < x1
+			&& move_y > y0 && move_y < y1) {
+		if (down)
+			move = move_y - down_y;
+	}
+
+	return move;
+}
+
+static int __scroll_move_y(abc_obj_t* obj, int x0, int x1, int y0, int y1, int scroll_width, GLfloat scroll_tri[2])
+{
+	return __scroll_move(obj->mouse_down_x, obj->mouse_down_y,
+			obj->mouse_move_x,
+			obj->mouse_move_y, x0, x1, y0, y1, scroll_width, scroll_tri);
+}
+
+static int __scroll_move_x(abc_obj_t* obj, int x0, int x1, int y0, int y1, int scroll_width, GLfloat scroll_tri[2])
+{
+	return __scroll_move(obj->mouse_down_y, obj->mouse_down_x,
+			obj->mouse_move_y,
+			obj->mouse_move_x, y0, y1, x0, x1, scroll_width, scroll_tri);
+}
+
 static int __render_draw_border(abc_render_t* render, abc_obj_t* obj, int width, int height)
 {
 	abc_obj_t* parent = obj->parent;
@@ -96,9 +176,8 @@ static int __render_draw_border(abc_render_t* render, abc_obj_t* obj, int width,
 	if (0 == vao)
 		__init_buffers(&vao, buffers);
 
-	int margin = 0;
 	int border = 0;
-	int border_type = ABC_BORDER_SOLID;
+	int border_style = ABC_BORDER_SOLID;
 
 	double fgColor[3] = {0.0, 0.0, 0.0};
 	double bgColor[4] = {0.0, 0.0, 0.0, 0.0};
@@ -109,23 +188,19 @@ static int __render_draw_border(abc_render_t* render, abc_obj_t* obj, int width,
 		abc_css_color(bgColor, bgColor + 1, bgColor + 2, attr->value->data, attr->value->len);
 	}
 
-	attr = abc_obj_get_attr(obj, ABC_HTML_ATTR_MARGIN);
+	attr = abc_obj_get_attr(obj, ABC_CSS_BORDER_TOP);
 	if (attr)
-		margin = atoi(attr->value->data);
-
-	attr = abc_obj_get_attr(obj, ABC_HTML_ATTR_BORDER);
-	if (attr)
-		abc_css_border(fgColor, fgColor + 1, fgColor + 2, &border, &border_type, obj, attr->value->data);
+		abc_css_border2(fgColor, &border, &border_style, obj, width, attr->value->data);
 	else {
 		attr = abc_obj_find_attr(obj, ABC_HTML_ATTR_FONT_COLOR);
 		if (attr)
 			abc_css_color(fgColor, fgColor + 1, fgColor + 2, attr->value->data, attr->value->len);
 	}
 
-	int x = obj->x + margin;
-	int y = obj->y + margin;
-	int w = obj->w - margin * 2;
-	int h = obj->h - margin * 2;
+	int x = obj->x + obj->margin_left;
+	int y = obj->y + obj->margin_top;
+	int w = obj->w - obj->margin_left - obj->margin_right;
+	int h = obj->h - obj->margin_top  - obj->margin_bottom;
 
 	obj->view_x = x;
 	obj->view_y = y;
@@ -151,7 +226,9 @@ static int __render_draw_border(abc_render_t* render, abc_obj_t* obj, int width,
 
 				abc_overflow_show(&obj->view_x, &obj->view_y, &obj->view_w, &obj->view_h,
 						parent->view_x,
-						parent->view_y, parent->view_w, parent->view_h);
+						parent->view_y,
+						parent->view_w - parent->border_right  - parent->padding_right,
+						parent->view_h - parent->border_bottom - parent->padding_bottom);
 			}
 			break;
 		default:
@@ -195,15 +272,32 @@ static int __render_draw_border(abc_render_t* render, abc_obj_t* obj, int width,
 	GLfloat y_border = border / (float)h;
 
 	GLfloat aspect   = w / (float)h;
+	GLfloat h_scroll = 0.0;
+	GLfloat scroll_x = 0.0;
+	GLfloat scroll_w = 0.0;
+
 	GLfloat w_scroll = 0.0;
 	GLfloat scroll_y = 0.0;
 	GLfloat scroll_h = 0.0;
+	GLfloat scroll_padding = 0.0;
+	GLfloat scroll_tri[4]  = {1.5, 1.5, 1.5, 1.5};
 
 	double thumbColor[4] = {bgColor[0], bgColor[1], bgColor[2], bgColor[3]};
 	double trackColor[4] = {bgColor[0], bgColor[1], bgColor[2], bgColor[3]};
 
-	if (obj->content_h > obj->h && scroll_flag)
+	if (scroll_flag)
 	{
+		int scroll_width  = 15;
+
+		attr = abc_obj_get_attr(obj, ABC_CSS_SCROLLBAR_WIDTH);
+		if (attr && attr->value->len > 0)
+			scroll_width = abc_css_scrollbar_width(attr->value->data);
+
+		if (scroll_width > w / 8)
+			scroll_width = w / 8;
+		if (scroll_width > h / 8)
+			scroll_width = h / 8;
+
 		attr = abc_obj_get_attr(obj, ABC_CSS_SCROLLBAR_COLOR);
 		if (attr && attr->value->len > 0) {
 			thumbColor[3] = 1.0;
@@ -216,45 +310,43 @@ static int __render_draw_border(abc_render_t* render, abc_obj_t* obj, int width,
 			thumbColor[3] = 1.0;
 		}
 
-		w_scroll = 15.0;
+		if (obj->content_h > obj->h)
+		{
+			if (obj->content_w > obj->w)
+				scroll_padding = scroll_width;
 
-		attr = abc_obj_get_attr(obj, ABC_CSS_SCROLLBAR_WIDTH);
-		if (attr && attr->value->len > 0)
-			w_scroll = abc_css_scrollbar_width(attr->value->data);
-
-		if (w_scroll > h / 2)
-			w_scroll = h / 2;
+			float percent = h / (float)obj->content_h;
 
-		float percent = h / (float)obj->content_h;
+			scroll_h = h * percent;
+			if (scroll_h < scroll_width)
+				scroll_h = scroll_width;
 
-		scroll_h = h * percent;
-		if (scroll_h < w_scroll)
-			scroll_h = w_scroll;
+			int move = __scroll_move_y(obj, x + w - scroll_width, x + w,
+					y,
+					y + h - scroll_padding, scroll_width, scroll_tri + 2);
 
-		int move = 0;
-		if (obj->mouse_move_x > x + w - w_scroll
-				&& obj->mouse_move_x < x + w
-				&& obj->mouse_move_y > y
-				&& obj->mouse_move_y < y + h) {
+			int dy = abc_obj_scroll_y(obj, scroll_h, h, move, scroll_width, scroll_padding);
 
-			if (obj->mouse_down_x > x + w - w_scroll
-					&& obj->mouse_down_x < x + w
-					&& obj->mouse_down_y > y
-					&& obj->mouse_down_y < y + h) {
+			abc_dfs_update_xy(obj, 0, dy);
 
-				move = obj->mouse_move_y - obj->mouse_down_y;
-			}
+			scroll_h /= (float)h;
+			scroll_y  = obj->scroll_y / (float)h;
+			w_scroll  = scroll_width  / (float)w;
 		}
 
-		int dy = abc_obj_scroll_y(obj, scroll_h, h, move);
-
-		abc_dfs_update_xy(obj, 0, dy);
-
-		scroll_h /= (float)h;
-		scroll_y  = obj->scroll_y / (float)h;
-		w_scroll /= (float)w;
-
-		scf_logi("aspect: %lg, w_scroll: %lg, scroll_y: %lg, scroll_h: %lg\n\n", aspect, w_scroll, scroll_y, scroll_h);
+		if (obj->content_w > obj->w)
+		{
+#if 0
+			int move = __scroll_move_x(obj,
+					x,
+					x + w - scroll_padding,
+					y + h - scroll_width, y + h, scroll_width, scroll_tri);
+
+			scroll_w = scroll_h      / (float)w;
+			scroll_x = obj->scroll_y / (float)w;
+			h_scroll = scroll_width  / (float)h;
+#endif
+		}
 	}
 
 	glUseProgram(program);
@@ -267,10 +359,16 @@ static int __render_draw_border(abc_render_t* render, abc_obj_t* obj, int width,
 	uniform_thumbColor = glGetUniformLocation(program, "thumbColor");
 	uniform_trackColor = glGetUniformLocation(program, "trackColor");
 
-	uniform_wh         = glGetUniformLocation(program, "wh");
-	uniform_scroll_y   = glGetUniformLocation(program, "scroll_y");
-	uniform_scroll_h   = glGetUniformLocation(program, "scroll_h");
-	uniform_w_scroll   = glGetUniformLocation(program, "w_scroll");
+	uniform_wh             = glGetUniformLocation(program, "wh");
+	uniform_h_scroll       = glGetUniformLocation(program, "h_scroll");
+	uniform_scroll_x       = glGetUniformLocation(program, "scroll_x");
+	uniform_scroll_w       = glGetUniformLocation(program, "scroll_w");
+
+	uniform_w_scroll       = glGetUniformLocation(program, "w_scroll");
+	uniform_scroll_y       = glGetUniformLocation(program, "scroll_y");
+	uniform_scroll_h       = glGetUniformLocation(program, "scroll_h");
+	uniform_scroll_padding = glGetUniformLocation(program, "scroll_padding");
+	uniform_scroll_tri     = glGetUniformLocation(program, "scroll_tri");
 
 	glUniformMatrix4fv(uniform_mvp, 1, GL_FALSE, mvp);
 
@@ -283,10 +381,17 @@ static int __render_draw_border(abc_render_t* render, abc_obj_t* obj, int width,
 	glUniform4f(uniform_trackColor, trackColor[0], trackColor[1], trackColor[2], trackColor[3]);
 
 	glUniform2f(uniform_wh,       (GLfloat)w, (GLfloat)h);
+	glUniform1f(uniform_scroll_x, scroll_x);
+	glUniform1f(uniform_scroll_w, scroll_w);
+	glUniform1f(uniform_h_scroll, h_scroll);
+
 	glUniform1f(uniform_scroll_y, scroll_y);
 	glUniform1f(uniform_scroll_h, scroll_h);
 	glUniform1f(uniform_w_scroll, w_scroll);
 
+	glUniform1f (uniform_scroll_padding, scroll_padding);
+	glUniform4fv(uniform_scroll_tri,  1, scroll_tri);
+
 	// draw
 	glBindBuffer   (GL_ARRAY_BUFFER, buffers[0]);
 	glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(vert_update), vert_update);
@@ -309,7 +414,7 @@ static int __render_draw_border(abc_render_t* render, abc_obj_t* obj, int width,
 
 abc_render_t  __render_border =
 {
-	.type = ABC_HTML_ATTR_BORDER,
+	.type = ABC_CSS_BORDER,
 
 	.draw = __render_draw_border,
 	.fini = __render_fini_border,
diff --git a/ui/__render_text.c b/ui/__render_text.c
index bc8d491..91651de 100644
--- a/ui/__render_text.c
+++ b/ui/__render_text.c
@@ -117,7 +117,7 @@ int __init_text(cairo_t* cr, abc_obj_t* obj, int num_flag)
 	{
 		cairo_text_extents(cr, obj->text->data, &extents);
 
-		cairo_move_to  (cr, obj->parent->padding - (extents.x_bearing + extents.width + size / 2), -obj->y_bearing);
+		cairo_move_to  (cr, obj->parent->list_order_width - (extents.x_bearing + extents.width + size / 2), -obj->y_bearing);
 		cairo_show_text(cr, obj->text->data);
 		cairo_stroke(cr);
 		return 0;
@@ -139,14 +139,14 @@ int __init_text(cairo_t* cr, abc_obj_t* obj, int num_flag)
 	}
 
 	if (!obj->text_splits) {
-		__draw_text(&extents, cr, obj->text->data, obj->parent->padding, 0.0, obj->y_bearing, line_type, line_width);
+		__draw_text(&extents, cr, obj->text->data, obj->parent->list_order_width, 0.0, obj->y_bearing, line_type, line_width);
 		return 0;
 	}
 
 	scf_string_t* s;
 	abc_text_t*   t;
 
-	double x = obj->parent->padding;
+	double x = obj->parent->list_order_width;
 	double y = 0.0;
 
 	while  (obj->text_splits) {
@@ -175,13 +175,12 @@ static int __render_draw_text(abc_render_t* render, abc_obj_t* obj, int width, i
 	if (obj->w <= 0 || obj->h <= 0)
 		return 0;
 
-	int d = obj->d;
-	int x = obj->x + d;
-	int y = obj->y + d;
-	int w = obj->w - d * 2;
-	int h = obj->h - d * 2;
+	int x = obj->x + obj->left;
+	int y = obj->y + obj->top;
+	int w = obj->w - obj->left - obj->right;
+	int h = obj->h - obj->top  - obj->bottom;
 
-	scf_logd("obj->type: %d, obj->w: %d, obj->h: %d, w: %d, h: %d, d: %d\n", obj->type, obj->w, obj->h, w, h, d);
+	scf_logd("obj->type: %d, obj->w: %d, obj->h: %d, w: %d, h: %d\n", obj->type, obj->w, obj->h, w, h);
 
 	if (0 == program)
 		__init_program(&program, vert_shader, frag_shader);
diff --git a/ui/abc_layout.c b/ui/abc_layout.c
index 5ca21b1..a1555f1 100644
--- a/ui/abc_layout.c
+++ b/ui/abc_layout.c
@@ -175,19 +175,19 @@ int abc_layout_css(abc_obj_t* obj)
 
 	attr = abc_obj_get_attr(obj, ABC_CSS_TOP);
 	if (attr)
-		top = abc_css_length(obj, attr->value->data, obj->h);
+		top = abc_css_length(obj, obj->h, attr->value->data);
 
 	attr = abc_obj_get_attr(obj, ABC_CSS_BOTTOM);
 	if (attr)
-		bottom = abc_css_length(obj, attr->value->data, obj->h);
+		bottom = abc_css_length(obj, obj->h, attr->value->data);
 
 	attr = abc_obj_get_attr(obj, ABC_CSS_LEFT);
 	if (attr)
-		left = abc_css_length(obj, attr->value->data, obj->w);
+		left = abc_css_length(obj, obj->w, attr->value->data);
 
 	attr = abc_obj_get_attr(obj, ABC_CSS_RIGHT);
 	if (attr)
-		right = abc_css_length(obj, attr->value->data, obj->w);
+		right = abc_css_length(obj, obj->w, attr->value->data);
 
 	int x = obj->x;
 	int y = obj->y;
@@ -238,9 +238,12 @@ int abc_layout_root(abc_ctx_t* abc, abc_obj_t* root, int width, int height)
 			break;
 
 		case ABC_HTML:
-			root->d  = abc_css_margin(root);
-			root->w  = width;
-			root->h  = height;
+			abc_css_margin (root, width);
+			abc_css_border (root, width);
+			abc_css_padding(root, width);
+
+			root->w = width;
+			root->h = height;
 
 			root->w0 = width;
 			root->h0 = height;
@@ -251,9 +254,12 @@ int abc_layout_root(abc_ctx_t* abc, abc_obj_t* root, int width, int height)
 
 		case ABC_HTML_BODY:
 		case ABC_HTML_DIV:
-			root->d     = abc_css_margin(root);
-			root->w_set = abc_css_width (root, width,  root->d);
-			root->h_set = abc_css_height(root, height, root->d);
+			abc_css_margin (root, width);
+			abc_css_border (root, width);
+			abc_css_padding(root, width);
+
+			root->w_set = abc_css_width (root, width);
+			root->h_set = abc_css_height(root, height);
 
 			if (root->w_set) {
 				root->w0 = root->w;
@@ -269,24 +275,31 @@ int abc_layout_root(abc_ctx_t* abc, abc_obj_t* root, int width, int height)
 			}
 			break;
 		default:
-			root->d = abc_css_margin(root);
+			abc_css_margin (root, width);
+			abc_css_border (root, width);
+			abc_css_padding(root, width);
 			break;
 	};
 
+	root->top    = root->margin_top    + root->border_top    + root->padding_top;
+	root->bottom = root->margin_bottom + root->border_bottom + root->padding_bottom;
+	root->left   = root->margin_left   + root->border_left   + root->padding_left;
+	root->right  = root->margin_right  + root->border_right  + root->padding_right;
+
 	root->overflow_type = ABC_OVERFLOW_VISIBLE;
 
 	scf_list_t*  l;
 	abc_obj_t*   child;
 
-	int x = root->x + root->d;
-	int y = root->y + root->d;
+	int x = root->x + root->left;
+	int y = root->y + root->top;
 	int h = 0;
 
 	int X = 0;
 	int Y = 0;
 
-	root_w -= root->d * 2;
-	root_h -= root->d * 2;
+	root_w -= root->left + root->right;
+	root_h -= root->top  + root->bottom;
 
 	for (l = scf_list_head(&root->childs); l != scf_list_sentinel(&root->childs); l = scf_list_next(l)) {
 		child = scf_list_data(l, abc_obj_t, list);
@@ -304,7 +317,7 @@ int abc_layout_root(abc_ctx_t* abc, abc_obj_t* root, int width, int height)
 			case ABC_HTML_OL:
 			case ABC_HTML_UL:
 			case ABC_HTML_LI:
-				child->x = root->x + root->d;
+				child->x = root->x + root->left;
 				child->y = y + h;
 
 				ret = abc_layout_root(NULL, child, root_w, root_h);
@@ -315,14 +328,14 @@ int abc_layout_root(abc_ctx_t* abc, abc_obj_t* root, int width, int height)
 				if (ABC_POSITION_FIXED == ret || ABC_POSITION_ABSOLUTE == ret)
 					break;
 
-				x = root->x  + root->d;
+				x = root->x  + root->left;
 				y = child->y + child->h;
 				h = 0;
 				break;
 
 			case ABC_HTML_BR:
 			case ABC_HTML_TR:
-				x  = root->x + root->d;
+				x  = root->x + root->left;
 				y += h;
 				h  = 0;
 			default:
@@ -349,7 +362,7 @@ int abc_layout_root(abc_ctx_t* abc, abc_obj_t* root, int width, int height)
 						t  = t->next;
 					}
 
-					x  = root->x + root->d;
+					x  = root->x + root->left;
 					y += h;
 					h  = 0;
 
@@ -358,7 +371,7 @@ int abc_layout_root(abc_ctx_t* abc, abc_obj_t* root, int width, int height)
 						x += t->w;
 					}
 
-				} else if (x + child->w < root->x + root->d + root_w) {
+				} else if (x + child->w < root->x + root->left + root_w) {
 					if (h < child->h)
 						h = child->h;
 
@@ -366,7 +379,7 @@ int abc_layout_root(abc_ctx_t* abc, abc_obj_t* root, int width, int height)
 				} else {
 					y += h;
 
-					child->x = root->x + root->d;
+					child->x = root->x + root->left;
 					child->y = y;
 
 					ret = abc_layout_root(NULL, child, root_w, root_h);
@@ -380,7 +393,7 @@ int abc_layout_root(abc_ctx_t* abc, abc_obj_t* root, int width, int height)
 				}
 
 				if (ABC_HTML_P == child->type) {
-					x  = root->x + root->d;
+					x  = root->x + root->left;
 					y += h;
 					h  = 0;
 				}
@@ -394,8 +407,8 @@ int abc_layout_root(abc_ctx_t* abc, abc_obj_t* root, int width, int height)
 			Y = child->y + child->h;
 	}
 
-	X += root->d;
-	Y += root->d;
+	X += root->right;
+	Y += root->bottom;
 
 	if (root->w < X - root->x)
 		root->w = X - root->x;
diff --git a/ui/abc_layout_div.c b/ui/abc_layout_div.c
index 90097ad..f1c0fe2 100644
--- a/ui/abc_layout_div.c
+++ b/ui/abc_layout_div.c
@@ -22,9 +22,9 @@ int abc_layout_div(abc_layout_t* layout, abc_obj_t* obj, int width, int height)
 	int h;
 
 	if (obj->w_set)
-		w = obj->w0 - obj->d * 2;
+		w = obj->w0 - obj->left - obj->right;
 	else
-		w = width - obj->d * 2;
+		w = width - obj->left - obj->right;
 
 	attr = abc_obj_find_attr(obj, ABC_HTML_ATTR_FONT_SIZE);
 	if (attr)
@@ -42,13 +42,13 @@ int abc_layout_div(abc_layout_t* layout, abc_obj_t* obj, int width, int height)
 	if (ret < 0)
 		scf_loge("ret: %d\n", ret);
 
-	h = extents.height + extents.height / 2 + obj->d * 2;
+	h = extents.height + extents.height / 2 + obj->top + obj->bottom;
 
 	obj->w = obj->w_set ? obj->w0 : w;
 	obj->h = obj->h_set ? obj->h0 : h + obj->h;
 
-	scf_logd("%s, w: %d, h: %d, d: %d, x_bearing: %lg, y_bearing: %lg, width: %lg, height: %lg, x_advance: %lg, y_advance: %lg, width: %d, height: %d\n",
-			obj->text->data, obj->w, obj->h, d,
+	scf_logd("%s, w: %d, h: %d, x_bearing: %lg, y_bearing: %lg, width: %lg, height: %lg, x_advance: %lg, y_advance: %lg, width: %d, height: %d\n",
+			obj->text->data, obj->w, obj->h,
 			extents.x_bearing, extents.y_bearing, extents.width, extents.height,
 			extents.x_advance, extents.y_advance, width, height);
 
diff --git a/ui/abc_layout_h1.c b/ui/abc_layout_h1.c
index 720ce27..7a8bf00 100644
--- a/ui/abc_layout_h1.c
+++ b/ui/abc_layout_h1.c
@@ -47,37 +47,36 @@ int abc_layout_h1(abc_layout_t* layout, abc_obj_t* obj, int width, int height)
 
 	cairo_set_font_size(cr, size);
 
-	int d     = abc_css_margin(obj);
-	int w_set = abc_css_width (obj, width,  d);
-	int h_set = abc_css_height(obj, height, d);
+	int w_set = abc_css_width (obj, width);
+	int h_set = abc_css_height(obj, height);
 
 	int dw = 0;
 	switch (obj->parent->type) {
 		case ABC_HTML_OL:
-			if (0 == obj->parent->padding) {
+			if (0 == obj->parent->list_order_width) {
 				scf_string_t* s = abc_ol_list_style(obj->parent, obj->parent->n_childs);
 				if (s) {
 					cairo_text_extents(cr, s->data, &extents);
 
-					obj->parent->padding = extents.width + extents.x_bearing + size / 2;
+					obj->parent->list_order_width = extents.width + extents.x_bearing + size / 2;
 
 					scf_string_free(s);
 					s = NULL;
 				}
 			}
 
-			dw = obj->parent->padding;
+			dw = obj->parent->list_order_width;
 			break;
 
 		case ABC_HTML_UL:
 			dw = size;
-			obj->parent->padding = size;
+			obj->parent->list_order_width = size;
 			break;
 		default:
 			break;
 	};
 
-	int w = (width -  d * 2 - dw) / size * size;
+	int w = (width - obj->left - obj->right - dw) / size * size;
 
 	int ret = __layout_text(cr, obj, 0, w, &extents);
 	if (ret < 0)
@@ -85,11 +84,11 @@ int abc_layout_h1(abc_layout_t* layout, abc_obj_t* obj, int width, int height)
 
 	obj->y_bearing = extents.y_bearing;
 
-	obj->w = extents.width  + d * 2 + dw;
-	obj->h = extents.height + extents.height / 2 + d * 2;
+	obj->w = extents.width  + obj->left + obj->right + dw;
+	obj->h = extents.height + extents.height / 2 + obj->top + obj->bottom;
 
-	scf_logd("%s, w: %d, h: %d, d: %d, x_bearing: %lg, y_bearing: %lg, width: %lg, height: %lg, x_advance: %lg, y_advance: %lg, width: %d, height: %d\n",
-			obj->text->data, obj->w, obj->h, d,
+	scf_logd("%s, w: %d, h: %d, x_bearing: %lg, y_bearing: %lg, width: %lg, height: %lg, x_advance: %lg, y_advance: %lg, width: %d, height: %d\n",
+			obj->text->data, obj->w, obj->h,
 			extents.x_bearing, extents.y_bearing, extents.width, extents.height,
 			extents.x_advance, extents.y_advance, width, height);
 
diff --git a/ui/abc_layout_img.c b/ui/abc_layout_img.c
index cab1669..5842d89 100644
--- a/ui/abc_layout_img.c
+++ b/ui/abc_layout_img.c
@@ -2,9 +2,9 @@
 
 int abc_layout_img(abc_layout_t* layout, abc_obj_t* obj, int width, int height)
 {
-	obj->w_set = abc_css_width (obj, width,  obj->d);
-	obj->h_set = abc_css_height(obj, height, obj->d);
+	obj->w_set = abc_css_width (obj, width);
+	obj->h_set = abc_css_height(obj, height);
 
-	scf_logi("w: %d, h: %d, d: %d\n", obj->w, obj->h, obj->d);
+	scf_logi("w: %d, h: %d\n", obj->w, obj->h);
 	return 0;
 }
diff --git a/ui/abc_layout_table.c b/ui/abc_layout_table.c
index e806594..69cb910 100644
--- a/ui/abc_layout_table.c
+++ b/ui/abc_layout_table.c
@@ -14,40 +14,67 @@ int abc_layout_table(abc_layout_t* layout, abc_obj_t* obj, int width, int height
 	if (attr) {
 		if (!__html_strcmp(attr->value->data, "collapse")) {
 			collapse = 1;
-			abc_obj_set_attr(obj, ABC_HTML_ATTR_PADDING, "0", 1);
+			abc_obj_set_attr(obj, ABC_CSS_PADDING_TOP,    "0", 1);
+			abc_obj_set_attr(obj, ABC_CSS_PADDING_BOTTOM, "0", 1);
+			abc_obj_set_attr(obj, ABC_CSS_PADDING_LEFT,   "0", 1);
+			abc_obj_set_attr(obj, ABC_CSS_PADDING_RIGHT,  "0", 1);
+
+			abc_css_margin (obj, width);
+			abc_css_border (obj, width);
+			abc_css_padding(obj, width);
+
+			obj->top    = obj->margin_top    + obj->border_top;
+			obj->bottom = obj->margin_bottom + obj->border_bottom;
+			obj->left   = obj->margin_left   + obj->border_left;
+			obj->right  = obj->margin_right  + obj->border_right;
 		}
 	}
 
-	int d     = obj->d;
-	int w_set = abc_css_width (obj, width,  d);
-	int h_set = abc_css_height(obj, height, d);
+	int w_set = abc_css_width (obj, width);
+	int h_set = abc_css_height(obj, height);
 
-	int x = obj->x + d;
-	int y = obj->y + d;
+	int x = obj->x + obj->left;
+	int y = obj->y + obj->top;
 
 	for (l = scf_list_head(&obj->childs); l != scf_list_sentinel(&obj->childs); l = scf_list_next(l)) {
 		tr = scf_list_data(l, abc_obj_t, list);
 
-		int w  = obj->td_width;
-		int h  = obj->td_height;
-		int d2 = d;
+		int left   = obj->left;
+		int right  = obj->right;
+		int top    = obj->top;
+		int bottom = obj->bottom;
+
+		int w = obj->td_width;
+		int h = obj->td_height;
 
 		for (l2 = scf_list_head(&tr->childs); l2 != scf_list_sentinel(&tr->childs); l2 = scf_list_next(l2)) {
 			td  = scf_list_data(l2, abc_obj_t, list);
 
-			if (collapse)
-				abc_obj_set_attr(td, ABC_HTML_ATTR_MARGIN, "0", 1);
+			if (collapse) {
+				abc_obj_set_attr(td, ABC_CSS_MARGIN_TOP,    "0", 1);
+				abc_obj_set_attr(td, ABC_CSS_MARGIN_BOTTOM, "0", 1);
+				abc_obj_set_attr(td, ABC_CSS_MARGIN_LEFT,   "0", 1);
+				abc_obj_set_attr(td, ABC_CSS_MARGIN_RIGHT,  "0", 1);
+
+				td->top    = td->border_top    + td->padding_top;
+				td->bottom = td->border_bottom + td->padding_bottom;
+				td->left   = td->border_left   + td->padding_left;
+				td->right  = td->border_right  + td->padding_right;
+			}
 
-			d2 = abc_css_margin(td);
+			left   = td->left;
+			right  = td->right;
+			top    = td->top;
+			bottom = td->bottom;
 
 			if (w_set) {
 				w_set = 0;
-				obj->td_width = (obj->w - d * 2) / tr->n_childs - d2 * 2;
+				obj->td_width = (obj->w - obj->left - obj->right) / tr->n_childs - left - right;
 			}
 
 			if (h_set) {
 				h_set = 0;
-				obj->td_height = (obj->h - d * 2) / obj->n_childs - d2 * 2;
+				obj->td_height = (obj->h - obj->top - obj->bottom) / obj->n_childs - top - bottom;
 			}
 
 			w = obj->td_width;
@@ -55,26 +82,26 @@ int abc_layout_table(abc_layout_t* layout, abc_obj_t* obj, int width, int height
 
 			attr = abc_obj_get_attr(td, ABC_HTML_ATTR_WIDTH);
 			if (attr && attr->value && attr->value->len > 0)
-				w = abc_css_length(td, attr->value->data, obj->w);
+				w = abc_css_length(td, obj->w, attr->value->data);
 
 			attr = abc_obj_get_attr(td, ABC_HTML_ATTR_HEIGHT);
 			if (attr && attr->value && attr->value->len > 0)
-				h = abc_css_length(td, attr->value->data, obj->h);
+				h = abc_css_length(td, obj->h, attr->value->data);
 
 			td->x = x;
 			td->y = y;
-			td->w = w + d2 * 2;
-			td->h = h + d2 * 2;
+			td->w = w + left + right;
+			td->h = h + top  + bottom;
 
 			x += td->w;
 		}
 
-		obj->w = x + d - obj->x;
+		obj->w = x + obj->right - obj->x;
 
-		x  = obj->x + d;
-		y += h + d2 * 2;
+		x  = obj->x + obj->right;
+		y += h + top + bottom;
 	}
 
-	obj->h = y + d - obj->y;
+	obj->h = y + obj->bottom - obj->y;
 	return 0;
 }
diff --git a/ui/abc_layout_text.c b/ui/abc_layout_text.c
index 0513c1b..4786d35 100644
--- a/ui/abc_layout_text.c
+++ b/ui/abc_layout_text.c
@@ -135,11 +135,10 @@ int abc_layout_text(abc_layout_t* layout, abc_obj_t* obj, int width, int height)
 	if (!obj->text)
 		return 0;
 
-	int d = parent->d;
-	int x = obj->x - (parent->x + d);
+	int x = obj->x - (parent->x + parent->left);
 	int w = width;
 
-	scf_logd("obj->x: %d, parent->x: %d, w: %d, d: %d\n", obj->x, parent->x, w, d);
+	scf_logd("obj->x: %d, parent->x: %d, w: %d, parent->left: %d\n", obj->x, parent->x, w, parent->left);
 
 	surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, w, height);
 	cr      = cairo_create(surface);
@@ -161,8 +160,8 @@ int abc_layout_text(abc_layout_t* layout, abc_obj_t* obj, int width, int height)
 	obj->w = extents.width;
 	obj->h = extents.height + extents.height / 2;
 
-	scf_logd("%s, w: %d, h: %d, d: %d, x_bearing: %lg, y_bearing: %lg, width: %lg, height: %lg, x_advance: %lg, y_advance: %lg, width: %d, height: %d\n",
-			obj->text->data, obj->w, obj->h, d,
+	scf_logd("%s, w: %d, h: %d, parent->left: %d, x_bearing: %lg, y_bearing: %lg, width: %lg, height: %lg, x_advance: %lg, y_advance: %lg, width: %d, height: %d\n",
+			obj->text->data, obj->w, obj->h, parent->left,
 			extents.x_bearing, extents.y_bearing, extents.width, extents.height,
 			extents.x_advance, extents.y_advance, width, height);
 
diff --git a/ui/abc_render_img.c b/ui/abc_render_img.c
index 4e29a83..a968c7c 100644
--- a/ui/abc_render_img.c
+++ b/ui/abc_render_img.c
@@ -81,10 +81,10 @@ static int _render_draw_img(abc_render_t* render, abc_obj_t* obj, int width, int
 
 	scf_logi("%s, x: %d, y: %d, w: %d, h: %d\n", obj->keys[0], obj->x, obj->y, obj->w, obj->h);
 
-	int x = obj->x + obj->d;
-	int y = obj->y + obj->d;
-	int w = obj->w - obj->d * 2;
-	int h = obj->h - obj->d * 2;
+	int x = obj->x + obj->left;
+	int y = obj->y + obj->top;
+	int w = obj->w - obj->left - obj->right;
+	int h = obj->h - obj->top  - obj->bottom;
 
 	GLfloat vert_update[] =
 	{
diff --git a/ui/abc_render_li.c b/ui/abc_render_li.c
index b495202..232110f 100644
--- a/ui/abc_render_li.c
+++ b/ui/abc_render_li.c
@@ -82,7 +82,7 @@ static int _render_draw_li(abc_render_t* render, abc_obj_t* obj, int width, int
 	cairo_fill(cr);
 	cairo_stroke(cr);
 
-	int offset = obj->parent->padding;
+	int offset = obj->parent->list_order_width;
 	if (obj->text)
 		__init_text(cr, obj, 0);
 
diff --git a/ui/abc_render_td.c b/ui/abc_render_td.c
index 61b449e..f4176bf 100644
--- a/ui/abc_render_td.c
+++ b/ui/abc_render_td.c
@@ -47,26 +47,10 @@ static int _render_draw_td(abc_render_t* render, abc_obj_t* obj, int width, int
 
 	abc_attr_t*  attr;
 
-	int margin  = 0;
-	int border  = 1;
-	int padding = 4;
-	attr = abc_obj_find_attr(obj, ABC_HTML_ATTR_MARGIN);
-	if (attr)
-		margin = atoi(attr->value->data);
-
-	attr = abc_obj_find_attr(obj, ABC_HTML_ATTR_BORDER);
-	if (attr)
-		border = atoi(attr->value->data);
-
-	attr = abc_obj_find_attr(obj, ABC_HTML_ATTR_PADDING);
-	if (attr)
-		padding = atoi(attr->value->data);
-
-	int d = margin + border + padding;
-	int x = obj->x + d;
-	int y = obj->y + d;
-	int w = obj->w - d * 2;
-	int h = obj->h - d * 2;
+	int x = obj->x + obj->left;
+	int y = obj->y + obj->top;
+	int w = obj->w - obj->left - obj->right;
+	int h = obj->h - obj->top  - obj->bottom;
 
 	if (0 == program)
 		__init_program(&program, vert_shader, frag_shader);
diff --git a/ui/abc_render_text.c b/ui/abc_render_text.c
index 7bef4e6..457b312 100644
--- a/ui/abc_render_text.c
+++ b/ui/abc_render_text.c
@@ -221,7 +221,7 @@ static int _render_draw_text(abc_render_t* render, abc_obj_t* obj, int width, in
 		scf_string_free(s);
 		s = NULL;
 
-		x  = obj->parent->x + obj->parent->d;
+		x  = obj->parent->x + obj->parent->left;
 		y += h;
 
 		obj->text_splits = t->next;
diff --git a/ui/main.c b/ui/main.c
index db9a1ec..b232f49 100644
--- a/ui/main.c
+++ b/ui/main.c
@@ -109,8 +109,6 @@ static int __do_button_move(abc_ctx_t* ctx, int x, int y)
 		scf_logd("obj: %s, type: %d, x: %d, y: %d, w: %d, h: %d, event x: %d, y: %d\n",
 				obj->keys[0], obj->type, obj->x, obj->y, obj->w, obj->h, x, y);
 
-		int scroll_width = 25;
-
 		switch (obj->type)
 		{
 			case ABC_HTML_A:
@@ -141,17 +139,7 @@ static int __do_button_move(abc_ctx_t* ctx, int x, int y)
 				break;
 
 			case ABC_HTML_DIV:
-				attr = abc_obj_get_attr(obj, ABC_HTML_ATTR_TYPE);
-
-				if (attr && attr->value->len > 0)
-					scroll_width = atoi(attr->value->data);
-
-				if (obj->x + obj->w > scroll_width
-						&& obj->mouse_move_x > obj->x + obj->w - scroll_width
-						&& obj->mouse_move_x < obj->x + obj->w
-						&& obj->mouse_move_y > obj->y
-						&& obj->mouse_move_y < obj->y + obj->h)
-					ret = 1;
+				ret = 1;
 				break;
 			default:
 				break;
@@ -383,6 +371,8 @@ static gboolean button_press_event(GtkWidget* self, GdkEventButton* event, gpoin
 		if (obj) {
 			obj->mouse_down_x = event->x;
 			obj->mouse_down_y = event->y;
+			obj->mouse_move_x = -1;
+			obj->mouse_move_y = -1;
 
 			if (ABC_HTML_DIV == obj->type)
 				scf_logw("obj: %p mouse down_x: %d, down_y: %d, move_x: %d, move_y: %d\n", obj,
@@ -393,8 +383,8 @@ static gboolean button_press_event(GtkWidget* self, GdkEventButton* event, gpoin
 
 			obj->css_pse_type = ABC_CSS_ACTIVE;
 
-			if (abc_css_active(obj) > 0)
-				gtk_gl_area_queue_render(ctx->gl_area);
+			abc_css_active(obj);
+			gtk_gl_area_queue_render(ctx->gl_area);
 		}
 	}
 
-- 
2.25.1