Den CSS-Festlegungen entsprechend wird jedes Element durch ein Rechteck begrenzt. Die Ausma\u00dfe ergeben sich aus folgender Formel (Boxmodell):<\/p>\n
Gesamtgr\u00f6\u00dfe = Au\u00dfenabstand (margin) +\r\n Rahmen (border) +\r\n Innenabstand (padding) +\r\n Inhalt (width bzw. height)<\/pre>\nDie Eigenschaften \"width\" und \"height\" beziehen sich jedoch nur auf den Inhalt. F\u00fcr die Gesamtgr\u00f6\u00dfe gibt es keine separate Eigenschaft. Dadurch wird die Festlegung der Gesamtgr\u00f6\u00dfe eines Elements erschwert, wenn zus\u00e4tzlich Rahmen oder Abst\u00e4nde eingestellt sind.<\/p>\n
Demonstration des Problems<\/h2>\n
Im folgenden Beispiel ist ein einzelner Container mit einer festen Breite und einem Rahmen dargestellt.<\/p>\n
Dieser einzelne Container hat eine Breite von 300\u00a0px zuz\u00fcglich einer Rahmendicke von 20\u00a0px. Um eine Gesamtbreite von 300\u00a0px festzulegen, muss die Breite um die Rahmendicke reduziert werden. Bei Verwendung unterschiedlicher Einheiten f\u00fcr Breite und Rahmendicke ist dies jedoch nicht m\u00f6glich.<\/div>\nIm Vergleich mit dem Referenzobjekt wird der Aufschlag auf die Gesamtbreite aufgrund des verwendeten Rahmen deutlich.<\/p>\n
Dieses Referenzobjekt hat exakt eine Breite von 300\u00a0px.<\/div>\nL\u00f6sung durch absolute Positionierung<\/h2>\n
Durch Verwendung zweier verschachtelter Container kann eine bestimmte Gesamtgr\u00f6\u00dfe festgelegt werden, die unabh\u00e4ngig von Rahmen und Abst\u00e4nden ist. Zus\u00e4tzlich k\u00f6nnen beliebige Einheiten f\u00fcr Rahmendicke und Abst\u00e4nde gew\u00e4hlt werden.<\/p>\n
\nDieser Container hat einschlie\u00dflich des Rahmens und des Innenabstands eine Breite von 300\u00a0px. Die Rahmendicke von 0.25\u00a0em und der Innenabstand von 0.5\u00a0em m\u00fcssen nicht von der Breite des Containers abgezogen werden.<\/div>\n<\/div>\nDer \u00e4u\u00dfere Container wird als Bezugspunkt f\u00fcr das Positionieren festgelegt. Rahmen und Abst\u00e4nde werden dem inneren Container zugewiesen. Durch das absolute Positionieren des inneren Containers wird dieser an den Begrenzungen des \u00e4u\u00dferen Container ausgerichtet.<\/p>\n
<div style=\"width:300px; height:13em; position:relative\">\r\n <div style=\"position:absolute; top:0; right:0; bottom:0; left:0;\r\n border:0.25em solid #ff9; padding:0.5em\">\r\n ...\r\n <\/div>\r\n<\/div><\/code><\/pre>\nNachteilig ist, dass immer die Gesamtbreite und Gesamth\u00f6he angegeben sein m\u00fcssen. Eine automatische H\u00f6henanpassung entsprechend dem Inhalt ist daher nicht m\u00f6glich.<\/p>\n
Alternative mit automatischer H\u00f6henanpassung<\/h2>\n
Betrachtet man noch einmal das Boxmodell, so ergibt sich eine weitere L\u00f6sung mit automatischer H\u00f6henanpassung.<\/p>\n
\nDieser Container hat einschlie\u00dflich des Rahmens und des Innenabstands eine Breite von 300\u00a0px. Die Rahmendicke von 0.25\u00a0em und der Innenabstand von 0.5\u00a0em m\u00fcssen nicht von der Breite des Containers abgezogen werden.<\/div>\n<\/div>\nDer \u00e4u\u00dfere Container dient lediglich zur Festlegung der Gesamtbreite. Rahmen und Abst\u00e4nde werden am inneren Container eingestellt.<\/p>\n
<div style=\"width:300px\">\r\n <div style=\"border:0.25em solid #dd9; padding:0.5em\">\r\n ...\r\n <\/div>\r\n<\/div><\/code><\/pre>\nH\u00f6henangaben sind bei dieser L\u00f6sung nicht m\u00f6glich. Daher muss je nach gew\u00fcnschtem Effekt einer der vorgestellten Ans\u00e4tze verwendet werden.<\/p>\n","protected":false},"excerpt":{"rendered":"
Den CSS-Festlegungen entsprechend wird jedes Element durch ein Rechteck begrenzt. Die Ausma\u00dfe ergeben sich aus folgender Formel (Boxmodell):<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[23,30],"class_list":["post-31","post","type-post","status-publish","format-standard","hentry","category-various","tag-css","tag-web"],"_links":{"self":[{"href":"https:\/\/www.steffen-liersch.de\/content\/de\/wp-json\/wp\/v2\/posts\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.steffen-liersch.de\/content\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.steffen-liersch.de\/content\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.steffen-liersch.de\/content\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.steffen-liersch.de\/content\/de\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":18,"href":"https:\/\/www.steffen-liersch.de\/content\/de\/wp-json\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":426,"href":"https:\/\/www.steffen-liersch.de\/content\/de\/wp-json\/wp\/v2\/posts\/31\/revisions\/426"}],"wp:attachment":[{"href":"https:\/\/www.steffen-liersch.de\/content\/de\/wp-json\/wp\/v2\/media?parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.steffen-liersch.de\/content\/de\/wp-json\/wp\/v2\/categories?post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.steffen-liersch.de\/content\/de\/wp-json\/wp\/v2\/tags?post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}