mirror of
				https://github.com/RGBCube/serenity
				synced 2025-10-31 15:42:44 +00:00 
			
		
		
		
	 ed0dc2ff72
			
		
	
	
		ed0dc2ff72
		
	
	
	
	
		
			
			Using flex layout inside button solves the issue with wrongly calculated height when it has: pseudo element and whitespaces inside. Also using flex instead of a table layout allows for the same vertical alignment but with fewer layout nodes: a flex container and anonymous wrapper for content instead of a table wrapper, table, row, and cell.
		
			
				
	
	
		
			16 lines
		
	
	
	
		
			338 B
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			16 lines
		
	
	
	
		
			338 B
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!doctype html><style>
 | |
|     button {
 | |
|         position: relative;
 | |
|         padding: 20px;
 | |
|         background: initial;
 | |
|     }   
 | |
|     button:after {
 | |
|         content: ""; 
 | |
|         position: absolute;
 | |
|         left: 0;
 | |
|         top: 0;
 | |
|         background: green;
 | |
|         width: 100%;
 | |
|         height: 100%;
 | |
|     }   
 | |
| </style><body><button></button>
 |